带有侧边栏的CSS 100%高度

Question

带有侧边栏的CSS 100%高度

我的CSS有100%的高度问题.我已经搜索了许多教程以及解决方案,但我似乎无法得到我想要的结果.我所拥有的是侧栏和主栏,其中将放置内容.

由于内容的主要列延伸,我希望侧边栏的背景也可以伸展.但我得到的是侧边栏的背景一直停留在一个点上并且它不会一直向下.

在此输入图像描述

黑色背景是我的侧栏,内容似乎一直溢出.

我的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>CSS 100% Height</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>

<body>
<div id="page">
<div id="sidecolumn">
</div>
<div id="maincolumn">
    <div id="content">
    contents
    </div>
</div>

</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#content {
    background: #EEE;
    font: 1.5em arial, verdana, sans-serif;
    min-height: 100%;
}

#sidecolumn {
    width: 500px;
    height: 100%;
    background: #000;
    float: left;
    }

#maincolumn {
    height: 100%;
    }

#page {
    height: 100%;
    }

Run Code Online (Sandbox Code Playgroud)

我看到并试过的东西 http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Answer 1

Sha*_*ora 5

您可以实现您想要的通过display:table-cell财产.

首先定义display:table你的父div,然后定义display:table-cell你的孩子div,然后两个div将垂直相等.

更新了css

#content {
    background: #EEE;
    font: 1.5em arial, verdana, sans-serif;
    display: table-cell;
}

#sidecolumn {
    width: 500px;
    background: #000;
    display:table-cell;
}

#maincolumn {
    height: 100%;
}

#page {
    height: 100%;
    display:table;
}

Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/9dhbL8ke/

归档时间：	13 年，2 月前
查看次数：	4200 次
最近记录：	7 年，1 月前