Question

我正在尝试制作我的第一个网站，而且我遇到了一些麻烦。我想要一个完全占据整个网站屏幕空间的两列+标题布局

我想要以下规范：

标题高度屏幕的20％
左列20％宽度屏幕＆amp; 80 高度屏幕（剩余免费空间）
右列80宽屏＆amp; 80 高度屏幕（剩余免费空间）

我也希望div不会相互重叠。如果你用％来指定宽度和高度，我不知道这是否可行，但我希望如此:)。我希望有人会帮助我。我非常感激。

提前致谢。

Answer 1

我认为标题的动态高度并不常见，但如果这真的是你想要的，那么这应该有效：

<div id="header">
</div>
<div id="content">
   <div id="left">
   </div>
   <div id="right">
   </div>
</div>

和CSS

html, body {
   height:100%; /* important for some browsers */
} 
#header {
   height:20%;
   width:100%;
} 
#content {
   height:80%;
   width:100%;
   float:left;
}
#left {
   width:20%;
   float:left;
}
#right {
   width:80%;
   float:left;
}

两列和标题css布局问题

1 个答案: