CSS：特殊流体布局问题
[英]CSS: Special Fluid Layout Problems
问题描述
See attached image. 
见附图。 How is this accomplished? 这是如何完成的？ Gosh, I've been going CSS for 8 years but somehow never had to do this! 天哪，我已经使用了8年的CSS，但不知何故从来没有这样做过！
Thanks! 谢谢！
5 个解决方案
解决方案1
5 已采纳 2010-12-14 23:21:43
This is how I do it: 我是这样做的：
<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>解决方案2
3 2010-12-14 23:21:16
I had this implemented on my site a while back, but I lost the code. 我暂时在我的网站上实现了这个，但是我丢失了代码。 Here's a quick CSS mockup: 这是一个快速的CSS模型：
The HTML: 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>
And here's the CSS: 这是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;
}
This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/ . 这应该工作，这是一个实时副本： http ： //jsfiddle.net/dDZvR/12/ 。
Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. 请注意，无论何时向左侧栏添加填充，边框，边距等，都必须增加主体上的填充。 It'll save you a ton of debugging ;) 它会为你节省大量的调试;）
Good luck! 祝好运！
解决方案3
1 2015-02-18 00:46:46
This new approach doesn't break the layout as the content box (right) organically grows. 随着内容框（右）的有机增长，这种新方法不会破坏布局。 Also it allows to safely apply backgrounds and borders to the container box. 它还允许安全地将背景和边框应用于容器盒。
.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%;
}
解决方案4
0 2015-02-18 01:36:42
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>
解决方案5
0 2015-02-18 01:48:54
This is the most straight forward solution I could think of. 这是我能想到的最直接的解决方案。
Wrap both elements in a parent div set to relative positioning, then absolutely position the static side bar and set a margin on the responsive div the same width as the static sidebar. 将父div中的两个元素包装为相对定位，然后绝对定位静态侧栏并在响应div上设置与静态侧边栏相同宽度的边距。
HTML: HTML：
<div class="wrapper">
<div class="fixed"></div>
<div class="responsive">xx</div>
</div>
CSS: CSS：
.wrapper {
width: 100%;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
.responsive {
margin-left: 250px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.