Question

这可能吗？基本上我正在尝试创建一个看起来像这样的div布局：

<div_wrapper>

    <div_header>
    </div_header>

    <div_content>
    </div_content>

</div_wrapper>

在页面加载时，div_header占用200px，div_content填充剩余的垂直空间。而且，随着浏览器更改大小（即，用户拖动浏览器的角落以调整大小），div_header仍然保持在200px，div_content会动态更改大小。

这可能吗？感谢。

Answer 1

应该这样做..

#wrapper{height:100%;}
#header{
    height:200px;
    float:left;
    width:100%;
}
#content{
    height:100%;
}

Answer 2

我没有看到div_header（）的任何问题只是创建一个css规则，声明：

#header{height:200px;}

您可以使用js调整内容大小（）。如果你包含jQuery

$(document).ready(function(){
     $(window).resize(function(){
         $('#content').css("height", ($(window).height() - 200) + "px");
     });
     $('#content').css("height", ($(window).height() - 200) + "px");
});

希望这有帮助

创建一个在浏览器窗口更改时动态拉伸的div

2 个答案: