100％的div容器用保证金+固定导航

左手屏幕
右手一个div容器上的固定导航面板在较小的容器DIV（其中有100％的宽度+余量）万军内容

问题是我无法得到我想要的东西而不损害conten的导航或大小t div容器。

我希望有些我说的是有道理的，如果不看说明如下

不正确的（当前状态）：

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

正确（所需状态）：

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

来源

2014-09-12 mk_89

有一些问题，你的布局......

你的资产净值的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; 
}

来源

2014-09-12 21:56:14 LcSalazar

感谢您的帮助，现在我可以使用.nav容器作为固定导航的包装 – 2014-09-12 22:05:07

只需添加到您的＃内容元件固定面板的宽度按边距。

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

来源

2014-09-12 21:51:55 David

这不是我想要的，这最终导致页面太大，不得不水平滚动页面。 – 2014-09-12 21:54:29

为了避免这个问题，您应该将固定面板的宽度和#content margin px转换为％，以使其响应并且不会有水平滚动。 – David 2014-09-12 21:56:33

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

有一个很简单的方法，现在的诀窍就是让内容滚动到正确的位置。基本上它所做的是将角落设置到屏幕的指定区域，并使它们不移出该位置。

来源

2014-09-12 21:58:36 Bioto

它现在修复了，我更新了链接。 – Bioto 2014-09-12 22:00:10

100％的div容器用保证金+固定导航

回答

相关问题