Question

我有一些HTML和CSS来生成这个页面：

DIV被称为＆＃34;主要内容＆＃34;将页面向下延伸（在现场环境中，这可能会发生，所以我用重复的线条模拟了这一点）

然而，当我向下滚动名为＆＃34; navtower＆＃34;不会延伸到页面底部，如下所示：

我已经看到其他人遇到了类似的问题，我已尝试过建议的答案。

我将自己的身体设定为亲戚，但这似乎也无济于事。

我尝试过改变＆＃34; navtower＆＃34;从绝对到相对，但是没有做到。

我也尝试过使用身高：100vh;并没有这样做。

我也尝试过使用身高：100％;

我也尝试过使用bottom：0px;而且，没有运气。

代码如下：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>

任何想法？我不明白为什么其他建议的答案不起作用。

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

Answer 1

制作一个包装div并将div放入其中。在那些div之后。我们需要做的就是清除浮动，整个问题就消失了。把这个空div放在你最后一个浮动物体之后：

<div style="clear: both;"></div>

https://css-tricks.com/the-how-and-why-of-clearing-floats/

Answer 2

我相信this可能就是您所追求的目标。

我稍微重新构建了你的页面。我将整个事物分成两列 - 左边一列（#navigation）200px宽，右边一列（#main）填充剩余空间。它们一起位于容器div（#container）中。因为容器将扩展以适合内容，并且它完全隐藏在侧栏之外，您可以为此容器着色以更改导航的背景颜色。

以下是代码：

<强> 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

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

2 个答案: