我有一个非常基本的要求，即在屏幕上有一个左侧菜单(列)，在它的右侧有内容。我已经提供了一个基本代码，但它并没有真正解决我正在寻找的问题。首先是代码。
HTML
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="left-column">Left Column</div>
<div id="content">@RenderBody()</div>
</div>
</body>
CSS
html, body
{
margin:0;
padding:0;
}
#wrapper
{
margin:0 auto;
width:1000px; /* width of whole page */
}
#header
{
height:25px;
background-color:lightblue;
}
#left-column
{
float:left;
width:200px;
background-color:maroon;
}
#content
{
float:left;
width:800px;
background-color:lightgray;
}
这确实列出了内容，但我正在寻找以下内容。
- 左侧菜单和内容栏的高度应该相等，即 是，较小的 div(菜单或内容)应该拉伸(stretch)以对齐 使用较大的 div。
- 当两个 div 的内容都小于浏览器屏幕高度时，两个 div(菜单和内容)都应该自行拉伸(stretch)以适合屏幕高度。
任何人都可以提出必要的修改以实现上述 2 个条件。
最佳答案
嗨，Nirvan，你可以像这样轻松地做到这一点
写这个css
html, body{
margin:0;
padding:0;
}
#wrapper
{
margin:0 auto;
}
#header
{
height:25px;
background-color:lightblue;
}
#left-column{
background:red;
position:absolute;
top:25px;
left:0;
width:200px;
bottom:0;
width:200px;
}
#content {
background:green;
position:absolute;
left:200px;
right:0;
top:25px;
bottom:0;
}
写这个html
<div id="wrapper">
<div id="header">Header</div>
<div id="left-column">Left Column <br >Left Column <br >Left Column <br ></div>
<div id="content">@RenderBody() </div>
</div>
关于html - 一些帮助使用 css 拉伸(stretch)列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13282635/