html – 具有流体宽度的静态侧边栏

概述我遇到了一个令人困惑的问题,我不太确定如何解决.我有一个侧边栏和一个主要区域.侧边栏的宽度为25％,最大宽度为350px.其余部分由主区域(宽度：自动)占用.无论用户滚动多少,侧边栏都需要有100％的高度,并始终保持原样. 如果我有一个固定宽度的侧边栏,我可以做这样的事情(demo here)： div#sidebar { width: 350px; position: fixed 我遇到了一个令人困惑的问题,我不太确定如何解决.我有一个侧边栏和一个主要区域.侧边栏的宽度为25％,最大宽度为350px.其余部分由主区域(宽度：自动)占用.无论用户滚动多少,侧边栏都需要有100％的高度,并始终保持原样.

如果我有一个固定宽度的侧边栏,我可以做这样的事情(demo here)：

div#sIDebar {    wIDth: 350px;    position: fixed;    top: 0px;    left: 0px;    height: 100%}div#main {    wIDth: auto;    margin-left: 350px;}

但是,由于我不知道我的侧边栏有多宽,我不知道要添加到主要内容区域的余量.

有任何想法吗？

解决方法 我认为这就是你要找的,见 demo fiddle.

CSS：

HTML,body {    wIDth: 100%;    height: 100%;    padding: 0;    margin: 0;    overflow: hIDden;}#sIDebar {    float: left;    wIDth: 25%;    max-wIDth: 350px;    height: 100%;    overflow: hIDden;}#main {    overflow-x: hIDden;    overflow-y: auto;     height: 100%;  }

HTML：

<div ID="sIDebar"></div><div ID="main"></div>

总结

以上是内存溢出为你收集整理的html – 具有流体宽度的静态侧边栏全部内容，希望文章能够帮你解决html – 具有流体宽度的静态侧边栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。