响应式2列CSS布局包括固定宽度的边栏？ [英] Responsive 2-column CSS layout including sidebar with fixed width?
问题描述
找不到这个解决方案（我猜你一定是一个很常见的问题）在任何地方。
我创建一个响应式设计与侧边栏，其中侧边栏需要具有200px的固定宽度，并且具有未知的高度。我如何使它的主要内容区域占用所有的剩余宽度，没有任何行为错误。
我最近我来到它是以下，但问题是侧边栏可能与页脚重叠。任何人都可以建议我的代码修复，或者与我分享一些有效的代码。
* {
padding： 0;
margin：0;
outline：0;
-moz-box-sizing：content-box;
-webkit-box-sizing：content-box;
box-sizing：content-box;
}
body {
background：orange;
}
#container {
max-width：1000px;
min-width：768px;
margin：0 auto;
background：yellow;
position：relative;
height：100％;
}
#header {
background：purple;
color：white;
text-align：center;
padding：10px;
}
#main {
position：relative;
}
aside {
background：blue;
width：200px;
color：white;
position：absolute;
top：0;
/ *将此更改为right：0;如果你想在旁边的权利。另外，更改margin-left代码，如下。 * /
left：0;
padding-top：20px;
padding-bottom：20px;
padding-left：10px; / *如果你改变这个值，记得改变#primary的边距左值* /
padding-right：10px; / * ditto * /
}
#primary {
background：red;
/ *如果你想要在右边留下，将此更改为margin-right。还要更改左代码，上面。 * /
margin-left：220px; / * aside_width + aside_left_padding + aside_right_padding = 200px + 10px + 10px * /
padding：1em; / * whatever * /
}
#footer {
background：green;
color：white;
padding：10px;
position：absolute;
bottom：0;
left：0;
right：0;
}
< div id =container>
< div id =header>
< h1> LAYOUT TEST＃2< / h1>
< / div>
< div id =main>
< div id =primary>
< h2>这是主要内容**这是主要内容**这是主要内容< / h2>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< h2>子标题< / h2>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< h2>子标题< / h2>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< / div>
< aside>
< h3>导航（左）< / h3>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< p> lorem ipsum< / p>
< / aside>
< / div>
< div id =footer>
< h1> LAYOUT TEST＃2< / h1>
< / div>
< / div>
c> position：absolute 不是最好的。
-
与
max-width和margin：0 auto。不知道为什么你可能想要一个min-width -
您自动放置的任何块元素都会占用父元素的所有
width元件。因此，标题和页脚没有问题，只需将它们放置在正确的位置，即可正确显示。 -
正如您正确的做法，为您的主要部分使用容器元素。由于元素是从左到右，您可能需要在
#primary之前写aside。 -
使用
aside将float：left所需的固定宽度。 -
主要内容
#primary注意：剩余空间是父元素的剩余空间，因此，如果 您在父元素上设置min-width，不要指望您的#primary更窄！ p> -
现在您将遇到一个问题：容器元素
#main无法获得适当的高度。 这是因为与<$ c有关的问题$ c> float 。要强制父元素获得其浮动子元素的高度，请使用overflow：hidden。
您应该准备好了。以下是您的代码的略微修改的版本。
Cannot find a solution for this (what I'm guessing must be a pretty common problem) anywhere.
I am creating a responsive design with a sidebar, where the sidebar needs to have a fixed width of 200px and has unknown height. How can I make it so the main content area takes up all the remaining width, without anything misbehaving.
The closest I've come to it is the following, but the problem with it is that the sidebar can overlap the footer. Can anyone suggest a fix for my code, or share with me some code that works?
* {
padding: 0;
margin: 0;
outline: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
body {
background: orange;
}
#container {
max-width: 1000px;
min-width: 768px;
margin: 0 auto;
background: yellow;
position: relative;
height: 100%;
}
#header {
background: purple;
color: white;
text-align: center;
padding: 10px;
}
#main {
position: relative;
}
aside {
background: blue;
width: 200px;
color: white;
position: absolute;
top: 0;
/* change this to "right: 0;" if you want the aside on the right. Also, change the "margin-left" code, below. */
left: 0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px; /* If you change this value, remember to change the margin-left value of #primary */
padding-right: 10px; /* ditto */
}
#primary {
background: red;
/* change this to margin-right if you want the aside on the right. Also change the "left" code, above. */
margin-left: 220px; /* aside_width + aside_left_padding + aside_right_padding = 200px + 10px + 10px */
padding: 1em; /* whatever */
}
#footer {
background: green;
color: white;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div id="container">
<div id="header">
<h1>LAYOUT TEST #2</h1>
</div>
<div id="main">
<div id="primary">
<h2>THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT</h2>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<h2>sub heading</h2>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<h2>sub heading</h2>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>
<aside>
<h3>navigation (left)</h3>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</aside>
</div>
<div id="footer">
<h1>LAYOUT TEST #2</h1>
</div>
</div>
I think the approach with all those position: absolute is not the best one.
You want to have a container element with a
max-widthandmargin: 0 auto. Not sure why you might want amin-widthas well; you can of course.Any block element that you put automatically takes all the
widthof the parent element. Hence, there's no problem with the header and footer, just position them in the right spot and they will render properly.As you correctly did, use a container element for your main section. Since the elements are rendered left to right, you might want to write the
asidebefore the#primary.Apply
float: leftto theasidewith your desired fixed-width.The main content
#primaryelement will take the remaining space automatically (or just applywidth: auto. Note: the remaining space is the remaining space of the parent element, so, if you set themin-widthon the parent element, don't expect your#primaryto be narrower!Now you will have a problem: the container element
#mainwill not get the proper height. That's because of an issue withfloat. To force a parent element to get to the height of its floated children, useoverflow: hidden.
You should be ready to go. Here is a slightly modified version of your code.
这篇关于响应式2列CSS布局包括固定宽度的边栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
