Question

我有一个类似下面的html结构，带有侧边栏和主容器。我想要的是有一个固定宽度的侧边栏（后来用媒体查询改变它）和一个流畅的主容器。这意味着如果我缩小浏览器宽度，主容器的宽度应该减小，而侧边栏则不会。

我尝试了100％宽度的#container，15％宽度的侧边栏和85％宽度的主容器，但这（当然）也减少了侧边栏的宽度。只使用100％宽度的主容器和固定宽度的侧边栏容器似乎不起作用。

解决这个问题的最佳方法是什么？

HTML：

<div id="container">
    <div id="sidebar">
        //content
    </div>
    <div id="main">
        //content
    </div>
</div>

 ________________________
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
--------------------------

Answer 1

使用以下css

.container{display:block; padding:0 0 0 200px;}
.sidebar{display:block; float:left; width:200px; margin:0 0 0 -200px;}
.main{display:block; width:100%}

Answer 2

小提琴：http://jsfiddle.net/3ApFZ/

Css ：

#sidebar{
    width:150px;
    position: absolute;
    background:blue;
    height:100%;

}
#main{
    width:100%;
    padding-left: 150px;
    background:red;
    height:100%;
}

Answer 3

我几天前用类似的东西帮助过某人。如果您使用以下DEMO

，该怎么办？

基本上将左侧设置为固定宽度，将右侧设置为可调整宽度

.left {width:100%; height:20px; background-color:red; float:left; margin-left:-320px; display:inline}
.right {width:320px; height:20px; background-color:blue; float:right; display:inline}

流体div，宽度为100％

3 个答案: