成长的盒子不起作用
我喜欢左边的框随着内容向右扩展整个包装器而增长……我的意思是垂直缩放...不是水平的！
reference page
我相信这只是个css得体的问题……你能帮上忙吗？
回答 2
Stack Overflow用户
发布于 2010-11-30 06:06:56
尽量避免浮点数，浮点数是用于图像和文本的。人们经常在绝对定位更合适的情况下使用浮动。
基本上，您要做的就是在您的右窗格中添加一个与左窗格一样宽的边距。然后将左侧窗格绝对定位在右侧窗格的顶部，并将高度设置为100%，使其与容器一样高。容器将具有与内容相同的高度。
这是给你的示例：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body { width: 800px; margin: 0px auto; position: relative; }
#nav {
width: 200px; height: 100%;
position: absolute; left: 0px; top 0px;
background: #F00;
}
#content {
margin: 0px 0px 0px 200px;
heigth: 1000px;
background: #0F0;
}
</style>
</head>
<body>
<div id="nav">
</div>
<div id="content">
</div>
</body>
</html>Stack Overflow用户
发布于 2010-11-30 04:38:23
您可能正在寻找"fluid column layout“(Google that)，您可以通过安排如下标记来实现这一点：
<ul style="float:left; width:35%;">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
<div style="float:left; width:65%;">
<p>Lots of content goes here</p>
</div>随着整个页面宽度的增长(比如调整浏览器的大小)，两个“栏”都会伸展，以满足35%和65%的宽度要求。上面是一个快速示例标记，它没有考虑Internet Explorer，元素上的默认填充/边距或浮动间距，理想情况下，两列上的任何样式都将通过一个“类”来设置，即；<div class="column-a">，以及外部CSS文件中定义的所有类。
如果你想让我详述，请告诉我。
编辑:好的，那么你想让左栏的背景色延伸到底部，给人以“等高栏”的视觉效果？如果是这样的话，this link is great应该涵盖您需要了解和尝试的所有内容。
https://stackoverflow.com/questions/4307803
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号