Question

我有一个简单的网页表单，其中包含以下div顺序。

<div id="outer" style="width:100%;height:100%">
<div id="navigation" style="width:20%;min-height:400px; float:left"></div>
<div id="expand-collapse" style="width:1%" heigth:30px; float:left"></div>
<div id="content" style="width:79%" min-heigth:400px; float:left"></div>
</div>

请注意： expand-collapse正在包含一个image.once我点击这个内容区域将被扩展，下次它将崩溃。

我的问题是，当页面以不同的分辨率显示时“expand-collapse”区域获得不同的宽度。我知道这应该是以百分比为单位的像素。

我需要为导航和内容区域提供不同的宽度，并为“expand-collapse”div提供固定宽度。

有没有处理这种情况？

提前致谢

Answer 1

<div id="outer" style="width:100%; height:100%">
<div id="navigation" style="width:20%; min-height:400px; float:left"></div>
<div id="expand-collapse" style="width:10px; height:30px; float:left"></div>
<div id="content" style="min-height:400px; overflow:hidden;"></div>
</div>

您的样式属性格式不正确。

对于此修复，我只需向#content添加新的格式设置上下文：http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

将像素宽度与百分比混合时并不容易。但你总能即兴发挥：

<div id="outer" style="width:100%; height:100%">
    <div id="navigation"      style="width: 20%; float: left; min-height: 400px; background-color: #F00;"></div>
    <div id="content-wrapper" style="width: 80%; float: left;">
        <div id="expand-collapse" style="width:       10px; float: left; background-color: #0F0; height:      30px;"></div>
        <div id="content"         style="margin-left: 10px; float: none; background-color: #00F; min-height: 400px;"></div>
    </div>
</div>

Demo here

不同分辨率的div问题

2 个答案: