回答
这是我要做的事:
<style>
#container { margin-left: 250px; }
#sidebar {
display: inline; /* Fixes IE double-margin bug. */
float: left;
margin-left: -250px;
width: 250px;
}
/* Definitions for example only: */
#sidebar { background: #FF0000; }
#content { background: #EEEEEE; }
#sidebar, #content { height: 300px; }
</style>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
我已经在我的网站上实现了一段时间后,但我失去了代码。这里有一个快速的CSS样机:
的HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="left">
Mr. Fixed-width left
</div>
<div id="right">
Mr. Dynamic right. Scroll me!
</div>
</body>
</html>
而这里的CSS:
body
{
padding-left: 230px;
}
#left
{
position: fixed;
height: 100%;
left: 0px;
top: 0px;
width: 200px;
background-color: rgb(150, 150, 150);
border-right: 5px solid rgb(50, 50, 50);
padding: 10px;
}
#right
{
width: 100%;
height: 10000px;
}
这应该工作,这里的现场副本:http://jsfiddle.net/dDZvR/12/。
请注意,无论何时将填充,边框,边距等添加到左栏中,都必须增加正文的填充。它会为您节省大量的调试;)
祝您好运!
有没有反馈?它工作吗? *叹息* – Blender 2010-12-17 22:13:27
是的,我喜欢这个解决方案。 – 2015-02-18 01:30:48
这种新方法不会破坏布局的内容框(右)的有机增长。它还允许安全地将背景和边框应用于容器盒。
.container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.left {
position: absolute;
width: 80px;
height: 100%;
}
.right {
position: relative;
left: 80px;
top: 0;
margin-right: 100px;
height: 100%;
}
You can always use table display layouts (sigh)。
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
}
.sidebar {
width: 200px;
background: gray;
}
<div class="container">
<div class="sidebar">fixed width sidebar</div>
<div>dynamic content</div>
</div>
这是最直接的解决办法,我能想到的。
将父元素中的两个元素都设置为相对定位,然后绝对定位静态侧栏并在响应div上设置与静态侧栏相同宽度的边距。
HTML:
<div class="wrapper">
<div class="fixed"></div>
<div class="responsive">xx</div>
</div>
CSS:为您的更大的div
.wrapper {
width: 100%;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
.responsive {
margin-left: 250px;
}
- 1. css流体布局问题
- 2. 流体CSS布局问题
- 3. css流体布局图像问题
- 4. CSS流体布局?
- 5. 液体CSS布局问题
- 6. CSS特殊问题
- 7. 关于流体布局的问题
- 8. jQuery的砌体 - 流动布局问题
- 9. CSS流体/静态布局
- 10. 流体布局纯CSS
- 11. 与流体布局与CSS
- 12. CSS流体网格布局
- 13. 特殊的2与CSS的列布局
- 14. 奇特的CSS布局问题
- 15. jQuery Masonry - 流体布局问题
- 16. 我遇到流体布局问题
- 17. 解决Adpative和流体布局问题
- 18. CSS布局问题
- 19. CSS布局问题
- 20. CSS布局问题
- 21. CSS:布局问题
- 22. 布局问题 - CSS
- 23. CSS布局问题
- 24. CSS布局问题
- 25. CSS布局问题
- 26. CSS布局问题
- 27. CSS布局问题
- 28. CSS布局问题
- 29. CSS布局问题
- 30. CSS布局问题
您使用的百分比? – DeaconDesperado 2010-12-14 23:18:36