我想固定内容区域的最小宽度。我有两个侧边栏和内容区域。一个侧边栏可以通过按钮隐藏。另一个侧边栏应该始终可见。当第一个侧边栏被隐藏时，内容区域应该展开。但是除非它的隐藏内容应该固定为给定的静态大小。目前，当我给内容最小宽度静态值时，右侧边栏在低分辨率下消失。忽略侧边栏隐藏部分。我想避免低分辨率问题中的内容导致第二侧边栏溢出。
<body>
<div id="main-container" class="clearfix">
<aside id="sidebar-main" class="sidebar">
</aside>
<aside id="sidebar-sec" class="sidebar">
</aside>
<div id="main" class="clearfix">
</div>
</div>
</body>
body {
position: relative;
height: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
}
html {
height: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
}
#main-container {
height: 100%;
min-height: 100%;
width: 100%;
background-color:red;
}
#sidebar-main {
float: left;
height: 100%;
width: 240px;
background-color:blue;
}
#sidebar-sec {
float: right;
height: 100%;
width: 400px;
position: relative;
}
#main {
position: relative;
height: 100%;
margin-left: 240px;
margin-right: 400px;
background-color: yellow;
min-width:709px;
}
最佳答案
这里我改变了div的顺序并使用table布局。
body {
position: relative;
height: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
}
html {
height: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
}
#main-container {
height: 100%;
min-height: 100%;
background-color:red;
display: table;
}
aside{
display: table-cell;
height: 100%;
position: relative;
}
#sidebar-main {
width: 240px;
min-width: 240px;
background-color:blue;
}
#sidebar-sec {
width: 400px;
min-width: 400px;
}
#main {
position: relative;
height: 100%;
background-color: yellow;
min-width:709px;
display: table-cell;
}<body>
<div id="main-container" class="clearfix">
<aside id="sidebar-main" class="sidebar">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint pariatur eligendi saepe ullam incidunt, nemo commodi! Expedita, alias nihil tempore. Quibusdam omnis, eum minus mollitia quas nostrum repellat ipsa.
</aside>
<div id="main" class="clearfix">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint pariatur eligendi saepe ullam incidunt, nemo commodi! Expedita, alias nihil tempore. Quibusdam omnis, eum minus mollitia quas nostrum repellat ipsa.
</div>
<aside id="sidebar-sec" class="sidebar">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint pariatur eligendi saepe ullam incidunt, nemo commodi! Expedita, alias nihil tempore. Quibusdam omnis, eum minus mollitia quas nostrum repellat ipsa.
</aside>
</div>
</body>更新 fiddle - https://jsfiddle.net/afelixj/nspn2vk7/1/
关于html - 在不影响侧边栏的情况下制作固定内容区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34012976/