Question

我正在尝试将蓝色div扩展到页面的高度，但似乎没有任何效果： JSFiddle

的CSS：

/* Reset */
html,body {
    width:100%;
    height:100%;
    margin:0px;
}

/* General */
.clear {
    clear:both;
}

/* Page Layout */
#page {
    margin-left:250px;
    min-height:100%;
    background-color:green;
}

#main {
    float:right;
    width:100%;
    background-color:blue;
    height:100%;
}

#sidebar {
    float:left;
    width:250px;
    margin-left:-250px;
    background-color:#222629;
    min-height:100%;
}

和html：

<div id="page">
    <div id="main">
        main
    </div>
    <div id="sidebar">
        <ul>
           <li>something</li>
           ...
           <li>something</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

如果页面比侧边栏内容长得多，那么侧边栏也必须如此。

Answer 1

将它添加到小提琴的底部，我认为它是你想要的。

#main {
    height: 100vh;
}

https://jsfiddle.net/ac1p22r4/

这里有一些额外的修饰 https://jsfiddle.net/ssj3xtr7/

Answer 2

因为div不包含任何内容所以它不会扩展。

您可以让position:fixed使蓝色div扩展到页面高度。

#main {
    background-color: blue;
    float: right;
    height: 100%;
    position: fixed;
    width: 100%;
}

检查：https://jsfiddle.net/qyt83gow/1/

另一个选择是将min-height提供给该div。

Answer 3

只需更改高度属性的 #main 和 #sidebar 的值，如下所示：

#main, #sidebar {
   height: 100vh;
}

这会将div的高度拉伸到页面的高度。希望这能解决你的问题。

Answer 4

/* Reset */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* General */
.clear {
    clear: both;
}

/* Page Layout */
#page {

    display: table;
    width: 100%;
}

#main {
    width: 50%;
    background-color: blue;

    display: table-cell;
}

#sidebar {
     background-color: #00FF00;
    display: table-cell;
    background-color: #222629;

}

更新了链接here

Answer 5

function resize () {
    var x = $('#page').height();
    $('#main').css('height',x+'px');
}

$(document).ready (function(){
    resize();
})

$(window).resize(function(){ 
    resize();
})

Fiddle

Answer 6

你的CSS是正确的，但你的CSS中有一个错误，侧边栏中有更多的内容正在增加该侧边栏的高度。只需将overflow:auto或overflow-y:auto;添加到侧边栏，即可获得预期结果。

这是完整的CSS

/* Reset */
html,body {
    width:100%;
    height:100%;
    margin:0px;
}

/* General */
.clear {
    clear:both;
}

/* Page Layout */
#page {
    margin-left:250px;
    height:100%;
    background-color:green;
}

#main {
    float:right;
    width:100%;
    background-color:blue;
    height:100%;
    overflow:scroll;
}

#sidebar {
    float:left;
    width:250px;
    margin-left:-250px;
    background-color:#222629;
    max-height:100%;
    overflow:scroll;
}

这是小提琴。enter link description here

我的建议是，不要使用vm ，因为它不支持某些浏览器并部分支持某些浏览器。 Here是支持地图

Answer 7

use class expand-panel on both div sidebar and menu.
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
.clear {
   clear: both;
}
#page {
    display: table;
    width: 100%;
}
.expand-panel {
    display: table-cell;
    width: 50%;
}
#main {
    background-color: blue;
}
#sidebar {
    background-color: #00FF00;
}

Answer 8

在px中给出高度或给这个类（margin：5或10px;）

如何将div扩展到页面的高度？

8 个答案: