在任何地方找不到解决方案(我猜这一定是一个非常常见的问题).

我正在创建一个带侧边栏的响应式设计,其中侧边栏需要具有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;

/* 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;

}

LAYOUT TEST #2

THIS IS THE MAIN CONTENT THIS IS THE MAIN CONTENT THIS IS THE MAIN CONTENT

lorem ipsum

sub heading

lorem ipsum

sub heading

lorem ipsum

navigation (left)

lorem ipsum

LAYOUT TEST #2

html响应式五栏布局,HTML – 响应式2列CSS布局,包括固定宽度的侧边栏？相关推荐

css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
xml布局html 实例,XML - html教程,css布局
XML(eXtensible Markup Language)可扩大标记语言,是1种类似HTML的标记语言,它被设计为具有自我描写性,主要作用是包括和传输数据.XML是W3C的推荐标准,它的标签没有被 ...
php的布局设计,php学习之div+css布局设计排版（六）
网页标题 .box {width:960px;border:1px solid red;margin:0px auto;} .box .header {width:100%;height:90px;b ...
收藏！40 个 CSS 布局技巧
简介:CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大.CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的 ...
前端：40 个 CSS 布局技巧
CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大.CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的时间. ...
css布局方式_收藏！40 个 CSS 布局技巧
简介:CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大.CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的 ...
css布局方式_网页布局都有哪种？一般都用什么布局？
随着Web技术不断的革新,CSS近几年也变得多年前要更强大.在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的 ...
在CSS布局中让Floats轻拂
If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative wa ...
DIV+CSS布局基本流程及实例介绍
都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CS ...

html响应式五栏布局,HTML – 响应式2列CSS布局,包括固定宽度的侧边栏？

LAYOUT TEST #2

THIS IS THE MAIN CONTENT THIS IS THE MAIN CONTENT THIS IS THE MAIN CONTENT

sub heading

sub heading

navigation (left)

LAYOUT TEST #2

html响应式五栏布局,HTML – 响应式2列CSS布局,包括固定宽度的侧边栏？相关推荐

最新文章

热门文章

html响应式五栏布局,HTML – 响应式2列CSS布局,包括固定宽度的侧边栏？

LAYOUT TEST #2

THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT

sub heading

sub heading

navigation (left)

LAYOUT TEST #2

html响应式五栏布局,HTML – 响应式2列CSS布局,包括固定宽度的侧边栏？相关推荐

最新文章

热门文章

THIS IS THE MAIN CONTENT THIS IS THE MAIN CONTENT THIS IS THE MAIN CONTENT