Question

我想将内容区域的最小宽度固定。我有两个侧边栏和内容区域。一个侧边栏可以通过按钮隐藏。其他边栏应该始终可见。当第一个侧边栏隐藏时，内容区域应该展开。但除非其隐藏内容应固定为给定的静态大小。目前，当我给出内容最小宽度静态值时，右侧边栏以低分辨率消失。忽略侧边栏隐藏部分。我希望通过低分辨率问题中的内容避免第二个侧边栏溢出。

jsfiddle

<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;
}

jsfiddle

Answer 1

这里我更改了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>

更新了小提琴 - https://jsfiddle.net/afelixj/nspn2vk7/1/

Answer 2

编辑 - 看看这个问题：

Fixed sidebar and fluid content area

它不一样，但它可能足够相似，可以提供帮助。如果你有时间并且你不熟悉jQuery，那么你应该研究它，一旦你开始学习它的开头，它实际上会让很多事情变得更容易。

我认为如果你使用jQuery来改变内容区域的CSS，那么这可能是最好的。您链接的JSFiddle并不是根据您所描述的内容工作，因此我无法为您提供准确的代码，但它可能看起来像这样。

$("#sidebar-sec").click(function(){
    $("content_area").css("width", "width goes here");
});

沿着这些方面的某些内容可能比仅使用CSS更容易，特别是如果您遇到问题。如果你添加这样的东西，你也可以用它来隐藏侧边栏：

$("#sidebar-sec").hide();

固定内容区域而不影响侧边栏

2 个答案: