製作固定內容區域而不影響側邊欄

我想使內容區域最小寬度固定。我有兩個側邊欄和內容區域。一個側欄可以通過按鈕隱藏。其他一個應該始終可見。當第一個側欄隱藏內容區域時應該展開。但除非它的隱藏內容應該固定爲給定的靜態大小。目前，當我給內容最小寬度靜態值時，右邊欄以低分辨率消失。忽略邊欄隱藏部分。我想避免由低分辨率問題的內容溢出第二個邊欄。製作固定內容區域而不影響側邊欄

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

來源

2015-12-01 Dan

在這裏，我已經改變了的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/

來源

2015-12-01 05:29:44

這個按預期工作。只是爲了我的知識，你能告訴我有沒有使用表格和表格單元方法來實現這一點的方法？ – Dan

CSS的一個問題是'＃main-container'所需的總寬度是'width：1349px'。不是'寬度：100％'。所以你可以簡單地通過將1350px的寬度或最小寬度添加到'＃main-container'來解決這個問題。 - 檢查更新的小提琴 - [https://jsfiddle.net/afelixj/nspn2vk7/2/](https://jsfiddle.net/afelixj/nspn2vk7/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();

來源

2015-12-01 05:20:06

我在找一個css方式。但是，謝謝。在jsfiddle中它隱藏了第二面欄，內容佔據了全部寬度。那就是我想要避免 – Dan

我發現了一些可能會幫助我只是將其編輯到我的答案。 –

謝謝。我會試試 – Dan

製作固定內容區域而不影響側邊欄

回答

相關問題