使CSS Div 100％页面高度（非窗口）

PaulF 发表于 Dev

保罗

我有一些生成此页面的HTML和CSS：

DIV称为“主要内容”将页面向下拉伸（在实际环境中很可能会发生，因此我用重复的行对其进行了模拟）

但是，当我向下滚动时，名为“ navtower”的div不会延伸到页面底部，如下所示：

我看过这里的其他人也遇到了类似的问题，并且我尝试了建议的答案。

我将自己的身体设置为相对，这似乎也没有帮助。

我已经尝试将“ navtower”从绝对更改为相对，但这并没有做到。

我也尝试过使用height：100vh; 并没有做到这一点。

我也尝试过使用height：100％;

I've also tried using bottom: 0px; and still, no luck.

the code is as follows: https://jsfiddle.net/3evzk0L8/

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <style type="text/css">
            html, 
            body {
                margin:0;
                padding:0;
                height:100%;
            }
            body {
                position:relative;
            }
            #topbar {
                height: 40px;
                width: calc(100% - 200px);
                position: absolute;
                left: 200px;
                background-color: #CA0000;
                z-index:99;
            }
            #navtower {
                width: 200px;
                left: 0px;
                top: 0px;
                bottom: 0px;
                height:100%;
                background-color: #CA0000;
                position: absolute;
                z-index:99;
            }
            #maincontent {
                min-height: 100%;
                width: calc(100% - 200px);
                left: 200px;
                background-color: #E3E1FF;
                position: absolute;
                top: 40px;
            }



            </style>
            </head>

            <body>
            <div id="navtower">Content for  id "navtower" Goes Here</div>
            <div id="topbar">Content for  id "navtower" Goes Here</div>
            <div id="maincontent">Content for  id "navtower" Goes Here
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            </div>

            </body>
            </html>

any ideas? I can't see why other suggested answers aren't working.

jsfiddle: https://jsfiddle.net/3evzk0L8/

Tyler Roper

I believe this may be what you're after.

I've restructured your page a bit. I have separated the entire thing into two columns - the left one (#navigation) 200px wide, and the right one (#main) fills the remaining space. Together, they are in a container div (#container). Because the container will expand to fit the content, and its completely hidden aside from your side-bar, you can color this container to change the background color of the navigation.

Here is the code:

HTML

<div id="container">
    <div id="navigation">
        SIDE COLUMN
    </div>
    <div id="main">
        <div id="top">
            TOP BAR
        </div>
        <div id="content">
            CONTENT
        </div> 
    </div>
    <div style="clear: both;"></div>
</div>

CSS

    html, body {
      margin:0;
      padding:0;
    }

    #container {
      background-color: #ccc;
    }

    #navigation {
      float: left;
      width: 200px;
    }

    #main {
      float: left;
      height: 100%;
      width: calc(100% - 200px);
    }

    #top {
      width: 100%;
      height: 50px;
      background-color: #666;
    }

    #content {
      width: 100%;
      background-color: white;
    }

Visual Example

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。