使用CSS的嵌套DIV布局超出了边界

时间：2014-08-29 10:30:33

标签： html css layout

我正在使用DIV和CSS开发布局，如下图所示。在调整浏览器大小时，元素应动态调整大小。我的布局看起来非常相似。但是，正如您在此JSFiddle Link中看到的那样，＆＃39;补充工具栏内容＆＃39;更长，以及＆＃39; Image Block＆＃39;的宽度。比它应该更广泛。

因此，我在浏览器中同时获得垂直和水平滚动条。我知道这是由于补充栏内容的高度所致。设置为＆＃39; Image Block＆＃39;的高度和宽度的100％。设置为100％，但我不确定如何纠正它，同时使高度＆amp;宽度以适应布局。

感谢任何帮助。 感谢

期望的布局

Desired Layout

它在浏览器上的显示方式

How it looks on a browser

JSFiddle Link

HTML 

<div class="content">
    <div class="top_block root_container">
        <div id="brand_header" class="content">
        Header 1
        </div>
    </div>
    <div id="address_bar" class="top_block search_block">
        <div class="content">
        Header 2
        </div>
    </div>
    <div id="additional_features" class="top_block">
        <div class="content">
        Header 3
        </div>
    </div>


    <div id="content_block_parent">
    <div id="sidebar">
        <div id="result_filter">
        Sidebar Header
        </div>
        <div id="result_list">
            Sidebar Content </br>
            sdgsdg</br>
            sdgsdg</br>
            sdgsdg</br>
        </div>
    </div>
    <div id="image_block">
    Image Block 
    </div>
    <div class="bottom_block">
        <div class="content">
        Footer
        </div>
    </div>
</div>

CSS 

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; 
}

.content {
    min-height: 100%;
    position: relative;
    overflow: auto;
    z-index: 0; 
}

.background {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
}

.top_block {
    width: 100%;
    display: block; 
}

.bottom_block {
    position: absolute;
    width: 100%;
    display: block;
    bottom: 0; 
    background-color: #555;
    height: 50px;
    min-height: 50px;
}

.left_block {
    display: block;
    float: left; 
}

.right_block {
    display: block;
    float: right; 
}

.center_block {
    display: block;
    width: auto; 
}

.root_container {
    width: 100%;
    height: 70px;
    background-color: #ffffff;
}

.search_block {
    width: 100%;
    height: 70px;
    background-color: #9966ff;
}

#content_block_parent{
    style="width:100%; height:100%;
}

#result_list {
    position:absolute;
    width: 100%;
    top:45px;
    bottom:205px;
    overflow-y: auto;
    min-height: 50px;
}

#result_filter{
    position: absolute;
    /*  display: block;*/
    border-bottom: 1px solid #e4e4e4;
    height: 44px;
    width: 100%;
    z-index: 10;
    background-color: #9966ff;
    top: 0px;
}

#sidebar {
    position: absolute;
    top: 153px;
    float: left;
    height: 100%;
    background-color:#666;
    width:300px;
}

#image_block{
    position: absolute;
    top: 153px;
    float: left;
    margin-left:300px;
    height: 100%;
    width: 100%;
    background-color:#666eee;
}

#address_bar{
    clear: left;
    position: relative;
    width: 100%;
    margin: 0;
    border-top: 1px solid #acf;
    border-bottom: 1px solid #acf;
    height: 47px;
    background: #fcfcfb url("vlb.jpg") 0 0 repeat;
    -webkit-box-shadow: 0 2px 2px 0 rgba(55,55,55,0.1) inset,0 1px 3px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 2px 0 rgba(55,55,55,0.1) inset,0 1px 3px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(55,55,55,0.1) inset,0 1px 3px 0 rgba(0,0,0,0.2);
    z-index: 1;
    height: 40px;
}

#brand_header{
    height: 36px;
    padding-top: 4px;
    background-color: #eee;
}

#additional_features{
    position: absolute;
    left: 0;
    width: 100%;
    min-width: 800px;
    height: 40px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #bfbfbf;
}

2 个答案:

答案 0 :(得分：1)

如果您想使用jQuery，请尝试此解决方案。 

$( window ).resize(function() {
    var height = $( window ).height();
    var width = $( window ).width();
    height -= $("#header").height() - $("#footer").height() - otherDivs;
    width -= $("#sidebar").width() - otherDivs; 
    $( "#sidebar" ).height(height);
    $( "#imageblock" ).height(height);
    $( "#imageblock" ).width(width);
});

至少这对我有用。

答案 1 :(得分：0)

我在寻找不使用JS的解决方案。而且this解决方案运行正常。我想可以进一步优化CSS。但这些元素组合在一起并按预期调整大小。

JSFiddle Link 

<body>
<div class="content">
    <div class="top_block root_container">
        <div id="brand_header" class="content">
        Header 1
        </div>
    </div>
    <div id="address_bar" class="top_block search_block">
        <div class="content">
        Header 2
        </div>
    </div>
    <div id="additional_features" class="top_block">
        <div class="content">
        Header 3
        </div>
    </div>


    <div id="content_block_parent">
    <div id="sidebar">
        <div id="result_filter">
        Sidebar Header
        </div>
        <div id="result_list">
            Sidebar Content </br>
            sdgsdg</br>
            ...
            sdgsdg</br>
            sdgsdg</br>
            sdgsdg</br>
        </div>
    </div>

    <div id="img_container">
        <div id="img_block">
             1234567890 1234567890
        </div>
    </div>
    <div class="bottom_block">
        <div class="content">
        Footer
        </div>
    </div>
</div>

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; 
    min-width:800px; 
    min-height:450px;
}


.content {
    min-height: 100%;
    position: relative;
    overflow: auto;
    z-index: 0; 
}

.background {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
}

.top_block {
    width: 100%;
    display: block; 
    min-width: 800px;
}

.bottom_block {
    position: absolute;
    width: 100%;
    display: block;
    bottom: 0; 
    background-color: #555;
    height: 50px;
    min-height: 50px;
}

.left_block {
    display: block;
    float: left; 
}

.right_block {
    display: block;
    float: right; 
}

.center_block {
    display: block;
    width: auto; 
}

.root_container {
    width: 100%;
    height: 70px;
    background-color: #ffffff;
}

.search_block {
    width: 100%;
    height: 70px;
    background-color: #9966ff;
}

#result_list {
    position:absolute;
    width: 100%;
    top:198px;
    bottom:50px;
    overflow-y: auto;
    min-height: 50px;
}


#result_filter{
    position: absolute;
    height: 44px;
    width: 100%;
    z-index: 10;
    background-color: #9966ff;
    top: 153px;
}

#sidebar {
    position: absolute;
    top: 0px;
    float: left;
    height: 100%;
    background-color:#666;
    width:300px;
    z-index: -100;
}

#img_container{
    position: absolute;
    top: 0px;
    height: 100%;
    right: 0px;
    background-color:#555;
    width:100%;
    z-index: -101;  
    margin-left: 300px;
    background-color:#222eee;
}

#img_block{
    position:absolute;
    top:153px;
    left:300px;
    bottom:50px;
    right: 0px;
    min-height: 50px;
    background-color:#666eee;
}

#address_bar{
    clear: left;
    position: relative;
    width: 100%;
    margin: 0;
    border-top: 1px solid #acf;
    border-bottom: 1px solid #acf;
    height: 47px;
    background: #fcfcfb url("vlb.jpg") 0 0 repeat;
    -webkit-box-shadow: 0 2px 2px 0 rgba(55,55,55,0.1) inset,0 1px 3px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 2px 0 rgba(55,55,55,0.1) inset,0 1px 3px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(55,55,55,0.1) inset,0 1px 3px 0 rgba(0,0,0,0.2);
    z-index: 1;
    height: 40px;
}

#brand_header{
    height: 36px;
    padding-top: 4px;
    background-color: #eee;
}

#additional_features{
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #bfbfbf;
}
相关问题
最新问题