gpt4 book ai didi

css - 2 列 100% 布局 - 1 个固定列和 1 个动态列

转载 作者:行者123 更新时间:2023-11-28 08:38:02 25 4
gpt4 key购买 nike

基本上容器的宽度为 100%(即它会填满整个页面)并且它有两列:

  • 第 1 列是导航栏,应保持固定宽度,例如200 像素
  • 第 2 列是内容区域,应该没有特定的宽度 - 它应该只填充剩余区域并根据屏幕/窗口大小进行调整

实现此目标的最佳方法是什么?

XHTML:

<body>
<div id="container">
<div id="navbar">
&nbsp;
</div>

<div id="content">
&nbsp;
</div>
</div>
</body>

CSS:

#container { float: left; width: 100%; }
#navbar { float: left; width: 200px; height: 800px; }
#content { float: left; height: 800px; ??? }

最佳答案

我的做法是在容器和内容 div 上设置一个最小宽度,在内容 div 上留有一个左边距,允许它在导航 div 旁边滑动。左边距加上最小宽度应等于容器的最小宽度。我添加了边框,因此您可以看到它的大小正确。

#container
{
width: 100%;
min-width: 960px;
}

#nav
{
float: left;
width: 200px;
height: 100%;
min-height: 800px;
border: 1px solid #ff0000;
}

#content
{
margin-left: 205px;
min-width: 755px;
height: 100%;
min-height: 800px;
border: 1px solid #0000ff;
}

fiddle http://jsfiddle.net/bmMTW/

关于css - 2 列 100% 布局 - 1 个固定列和 1 个动态列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9657285/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com