1

我遇到了 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>

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%;
    }

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

4

3 回答 3

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;
}

https://jsfiddle.net/9dhbL8ke/

于 2012-08-21T07:21:06.807 回答
0

使用定位来定位侧边栏和主栏。. .

 #sidecolumn {
position:relative;
top: 0px;
left:0px;
width: 100px;
height: 100%;
background: #000;
float: left;
}


#maincolumn {
position: relative;
left: 101px;
height: 100%;
}

这是一个小提琴

于 2012-08-21T07:24:08.437 回答
-1

使用等高功能

jQuery

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

$(document).ready(function() {
    equalHeight($(".eheight));

});

HTML

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

</div>
</body>
于 2012-08-21T07:21:59.990 回答