logo标签列表

如何使两个div高度相同

htmlcss
3
我可以为您翻译，以下是翻译的结果：

我有一个网站，需要让主页和右侧面板div元素的高度相同。

这是目前我得到的标记：

<!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" xml:lang="en">
<head>
  <style type="text/css">

* 
{
    margin:                 0;
    padding:                0;
}

body, form, html {
    height:             100%;
}
html
{
    font-family:        helvetica, Arial,sans-serif;
    font-size:          13px;
    margin:             0px;
    padding:            0px;
    background-color:   #f4f4f4;
}

.wrapper 
{
    min-height:         100%;
    height:             auto !important;
    height:             100%;
    margin:             0 auto -140px;
}

#header
{
    background:         url("Images/backgrounds/headback_50x50.jpg") repeat-x scroll center top;
    width:              100%;
    margin-top:         0px;
    height:             50px;
    background-color:   #474747;

}
#header .content {
    width:              100%;
    max-width:          1000px;
    margin-left:        auto;
    margin-right:       auto;
}
#header #mainMenu {
    float:              left;
    margin-left:        50px;
    margin-top:         23px;
}
#mainContent
{

    background-repeat:  repeat-y;
    width:              1006px;
    padding:            10px 20px 10px 20px;
    background-color:   #f4f4f4;
    min-height:         100%;
    height:             auto !important;
    height:             100%;
    margin:             0 auto;
}
#mainContent #page {
    width:              800px;
    float:              left;
    background-color:   #ffffff;
    -moz-border-radius:     4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius:          4px 4px 4px 4px;
}

#mainContent #rightPanel {
    width:              196px;
    overflow:           visible;
    float:              left;
    margin-left:        10px;
    height:             1000px;
}

#mainContent #rightPanel #rightCon {
    background-color:   #ffffff;
    padding:            7px;
    -moz-border-radius:     4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius:          4px 4px 4px 4px;
}
#footer
{
    background:         url("Images/backgrounds/footerback_300x300.jpg") repeat-x scroll center top;
    width:              100%;
    margin:             0px;
    height:             200px;
    background-color:   #3d3d3d;
}

</style>
</head>
<body>
<div class="wrapper">
            <div id="header">
                <div class="content">
                    <div id="contentBody">
                        <div class="mainLogo">&nbsp;</div>
                        <div id="mainMenu">

                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <div style="clear:both;"></div>
                </div>
            </div>

            <div id="mainContent">
                <div id="page">
                    Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.

                  Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
                </div>
                <div id="rightPanel">
                    <div id="rightCon">
                        Right Panel
                    </div>
                    &nbsp;
                </div>
                <div style="clear:both;"></div>
            </div>
            <div class="push"></div>
        </div>
        <div id="footer">
            <div class="content">
                Footer
            </div>
        </div>
    </body>
如果您创建一个fiddle，那么看到正在发生的事情会容易得多。 - Igor Jerosimić
你能看一下这个jsFiddle吗？ - Mee
@Mee，右侧面板的高度不完全相同？ - Banshee
@Mee 我正在使用 Chrome，其中差异只有几个像素，在 IE（最新版本）中差异很大。 - Banshee
@SnowJim 我也在使用Chrome。你没有提到你需要它适用于IE浏览器。所以你尝试过使用 display: table-cell 吗？ - Mee
显示剩余3条评论
3个回答
0
使用负边距来设置等高的 div；
CSS
#container {
width:960px;
margin: 0 auto;
}

#content {
float:left;
width:700px;
border-left: 260px solid #555;
}

#sidebar {
float: left;
width:260px;
margin-right: -260px;
position: relative;
}

HTML

<div id="container">

<div id="sidebar">
    <p>Sidebar</p>
</div>

<div id="content">
    <p>Main content</p>
</div>

</div>

这是实现同高度列效果的一种非常有效的方法。您还可以了解其他实现此效果的方法，可能更适合您的需求。

http://www.vanseodesign.com/css/equal-height-columns/

我相信将其实现到你所提供的代码中应该不是一件太难的任务，所以我会把它留给你。

祝你的网站好运！

这似乎是垂直居中样式。你能否使用 OP 的 HTML 演示一下？ - Denys Séguret
0
这看起来不错，即使对于移动设备来说也安全吗？你能否修改我的fiddle以展示在那个设置中也是可能的？ - Banshee
http://jsfiddle.net/TMxGL/ 现在你不再需要任何浮动、相对定位、JavaScript或任何令人困惑的东西了。 - Can Geliş
这种行为很正常，因为您正在使用 height: 100% 和 overflow: visible。 - Can Geliş
另外，您应该移除.wrapper的margin。 - Can Geliş
我看到你把圆角背景放在页面类上了？这样不好。设计是每个“部分”都有自己的白色面板，就像我的示例一样。 - Banshee
0

如果你能使用jQuery，当你只需要以下内容时，将会更容易：

$("#rightCon").height($('#page').height());

代码片段

这个解决方案的问题是，如果你在右侧面板中填充更多的数据，页面将不会跟随右侧面板。 - Banshee
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接