制作父母div大小调整为100％的绝对居中的div div

我需要你的帮助。有没有人知道一种制作父母的Div高度尺寸相对于其子div的方式。制作父母div大小调整为100％的绝对居中的div div

如果我为DIV #layout定义一个自动高度，那么div的大小调整为我的页面窗口的100％。但是，如果我在#layout div上定义高度，那么我需要考虑屏幕上使用的每个像素，以便在布局div周围保持边框的清晰和干净。如何将#layout div框的高度重新调整为其内容？

下面是问题的图片。正如你所看到的，＃box6打破了#layout div。

也许我错过了一些我忽略的东西，但我不确定从哪里开始。

这里是有问题的HTML和CSS：

* { 
 
    font-family: Segoe UI; 
 
    font-size: 9pt; 
 
} 
 
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    background: rgb(187, 195, 203); 
 
} 
 
.Absolute-Center { 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
#layout { 
 
    width: 900px; 
 
    height: 400px; 
 
    border: 1px solid rgb(112, 112, 112); 
 
} 
 
#box1 { 
 
    background: rgb(141, 155, 169); 
 
    color: #FFF; 
 
    padding: 3px; 
 
    font-weight: bold; 
 
} 
 
#box2 { 
 
    width: 100%; 
 
    background: rgb(240, 240, 240); 
 
    border-bottom: 1px solid rgb(180, 180, 180); 
 
    padding: 4px; 
 
    box-sizing: border-box; 
 
} 
 
#box3 { 
 
    width: 100%; 
 
    border-bottom: 1px solid rgb(180, 180, 180); 
 
} 
 
#box4 { 
 
    background: #FFF; 
 
    float: left; 
 
    width: 175px; 
 
    height: 375px; 
 
    border-right: 1px solid rgb(180, 180, 180); 
 
} 
 
#box5 { 
 
    background: rgb(240, 240, 240); 
 
    height: 375px; 
 
} 
 
#box6 { 
 
    width: 100%; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 
#leftcolumn { 
 
    float: left; 
 
} 
 
#rightcolumn { 
 
    border: 0; 
 
    padding: 3px; 
 
    text-align: center; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div id="layout" class="Absolute-Center"> 
 

 
    <div id="box1">Application Title</div> 
 
    <div id="box2"> 
 
    <div id="leftcolumn"></div> 
 
    <div id="rightcolumn">Some text in here later</div> 
 
    <div class="clear"></div> 
 
    </div> 
 

 

 
    <div id="box3"> 
 

 
    <!-- LEFT WINDOW PANE --> 
 
    <div id="box4"> 
 
     <ul> 
 
     <li data-show="#1">File Information</li> 
 
     <li data-show="#2">Comments</li> 
 
     </ul> 
 
    </div> 
 

 
    <!-- RIGHT WINDOW PANE --> 
 
    <div id="box5"></div> 
 

 
    </div> 
 

 
    <div id="box6"></div> 
 

 
</div>

来源

2015-12-02 Jason Kelly

这仅仅是一个糟糕的方式去布局你的页面。 –

我愿意接受改进建议。 –

这样怎么样？ https://jsfiddle.net/z5hf5qwf/ –

，而不是绝对定位，它与一组宽度改变为margin: auto，这样的高度将取决于在里面的元素和边界将与容器调整。见小提琴https://jsfiddle.net/z5hf5qwf/

CSS

.Absolute-Center { 
    margin: auto; 


} 
#layout { 
    width: 900px; 
    margin-top: 5%; 
    margin-bottom: 5%; 
    background-color: red; 
    border: 1px solid red; 
}

来源

2015-12-02 19:55:26

制作父母div大小调整为100％的绝对居中的div div

回答

相关问题