我搜索了谷歌,stackoverflow和其他表格和网站,但我找不到解决方案。我发现的一切都不适合我。
(问题相关网站:http://rikahiyuka.com)
缩写:
#DivC
是标题左下方和页脚上方的内容框。
#DivSB
是标题右下方和页脚上方的内容框。
#DivWC
是#DivC
和#DivSB
的容器,不可见。
我的HTML结构如下所示:
<div id="WC">
<div id="SB">...</div>
<div id="C">...</div>
</div>
注意:
#DivWC
高度会自动调整为#DivC
和#DivSB
中最长的div(使用overflow:hidden
)
#DivSB
有float:right
CSS属性。
我正在努力使#DivC
自动调整为#DivWC
高度。
我想对#DivSB
执行相同操作,以便#DivC
或#DivSB
更高,#DivWC
将具有最高框的高度,然后是另一个框(更短)来自#DivC
或#DivSB
的框会调整为#DivWC
高度。
将所有父元素设置为height:100%
会导致内容框的高度为100个视点高度。
我尝试使用display:table
和display:table-row
以及display:table-cell
,但这些会彻底破坏布局。
我已经看到绝对定位的一些用法,但据我所知,绝对定位被其他元素忽略,所以我不认为绝对定位会起作用,因为在其他页面和页脚上可能会添加更多的框不会在正确的地方。
我正在寻找使用CSS和HTML(5)的解决方案。 无需使用添加图像或使用Javascript。
我仍然对网络编码知之甚少,所以如果可以的话,请简单回答你的答案或尽可能地解释(尽可能)每一步(我理解并通过解释更好地学习)。
答案 0 :(得分:1)
您可以通过将#DivWC
显示为表格,将#DivC
和#DivSB
显示为表格单元格来实现这一目标。将他们的CSS更改为:
注意:不要忘记交换#DivC
和#DivSB
的位置。
/* *** Content *** */
#DivWC{
width:100%;
margin-top:20px;
height:100%; /* delete if you want it to only take the height it needs (based on children's content */
background-color:purple;
display: table;
border-collapse:separate;
border-spacing:5px;
}
/* *** Content (Content) *** */
#DivC{
background-color:#D4E9EB;
border-radius:15px;
padding:10px;
display: table-cell;
}
/* *** SideBar (Content) *** */
#DivSB{
background-color:#D4E9EB;
border-radius:15px;
width:150px;
padding:10px;
display: table-cell;
}
答案 1 :(得分:0)
HTML:
<div id="WC">
<div id="C">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum</div>
<div></div>
<div id="SB">Lorem ipsum @RIGHT</div>
</div>
CSS:
div {
border: 1px solid #666;
height: 20px;
}
#WC {
background-color: #ffc;
display: table;
width: 100%;
}
#WC > div {
display: table-cell;
}
#SB {
background-color: #cfc;
width: 100px;
}
#C {
background-color: #ccf;
width: 200px;
}