首页 文章

带有侧边栏的CSS 100％高度

提问于
浏览 次
1

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

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

enter image description here

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

我的代码

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

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

css height

3 回答

  • 0

    您可以通过 display:table-cell 属性实现所需 .

    首先将 display:table 定义为您的父div，然后将 display:table-cell 定义为您的子div，则两个div将垂直相等 .

    updated 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/

    回复于
  • 5

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

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


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

    Here is a fiddle

    回复于
  • -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>
    回复于

相关问题