Question

我尝试创建一个网页：

左侧屏幕上的固定导航面板
右侧的div容器，用于容纳较小div容器（宽度为100％+边距）的内容

问题是我无法在不影响内容div容器的导航或大小的情况下得到我想要的东西。

到目前为止我所拥有的： http://jsfiddle.net/u5j7ayud/

我希望我说的一些内容有意义，如果不看下面的插图

不正确（当前状态）：

 ___________
| ___|_____ |
||___|_____||
| ___|_____ |
||___|_____||
|____|______|

正确（理想状态）：

 ____________
|    | _____ |
|    ||_____||
|    | _____ |
|    ||_____||
|____|_______|

Answer 1

您的布局存在一些问题......

导航的position: fixed是一个坏主意。它会从页面流中取出元素，而float: left变得无用。

让内容通过内联定位技术（如css表）自动填充屏幕更好。我建议您将nav和content div转换为display: table-cell元素。

然后，在导航栏上设置width: 200px会使内容div填充剩余空间：

Updated Fiddle

body{
    padding:0; margin:0;
    display: table;
    width: 100%;
}
#content {
   display: table-cell;
   background: black;
   overflow: auto;
}

#box{
   background: red;
   min-height: 200px;
   margin: 10px
}

.nav {
    width:200px;
    height:100%;
    background:blue;
    text-align:right;
    padding: 5px 10px 0 0;
    display: table-cell;
}

Answer 2

http://jsfiddle.net/2tybnho2/1/

.nav  {
    position: absolute;
    top: 0;
    left: 0;
    right: 200px;
    bottom: 0;
    background-color: lightblue;
}

.contents {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    background-color: lightgreen;
}

有一种非常简单的方法，现在的诀窍是让滚动在内容中正常工作。基本上它的作用是将角设置到屏幕的指定区域，并使它们不会移出该位置。

Answer 3

只需添加 #content 元素 已修复 面板的宽度。

#content {
   background: black;
   overflow: auto;
   width:100%;
   margin-left: 200px;
}

100％div容器，带边距+固定导航

3 个答案: