Как получить оба div, чтобы они были одинаковой высоты

У меня есть сайт, где мне нужна главная страница и элементы панели справа, чтобы быть одинаковой высоты.Как получить оба 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>

источник

2013-04-19 Banshee

Было бы намного проще, чтобы увидеть что происходит, если вы создадите скрипку. –

Итак, вы хотите, чтобы ваш контент был тем же самым левым содержимым? – Mee

Можете ли вы посмотреть ** [на этом jsFiddle?] (Http://jsfiddle.net/Mee3/zBdDX/) ** – Mee

display: table-cell - простое и надежное решение для такого рода проблем. Пример: http://jsfiddle.net/26MGE/

источник

2013-04-19 17:46:31

Это выглядит хорошо, безопасно ли использовать даже для мобильных устройств? Не могли бы вы изменить мою скрипку, чтобы показать, что это возможно и в этой установке? – Banshee

http://jsfiddle.net/TMxGL/ вам больше не нужны никакие поплавки, родственники, javascript или какие-либо запутывающие вещи. –

Ничего, но кажется, что он тормозит нижний колонтитул, как я и ожидал ... – Banshee

Используйте отрицательные поля, чтобы установить до дивы с одинаковой высоты;

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/

Я уверен, что реализация его в код, который вы дали должно быть не так трудно из задачи, поэтому я оставлю его с вами.

Удачи вам в этом сайте!

источник

2013-04-19 17:39:21 GriffLab

Это выглядит как вертикальное центрирование. Можете ли вы продемонстрировать это с помощью HTML-кода OP? –

Если вы можете использовать JQuery, это было бы гораздо проще, если вам просто нужно:

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

FIDDLE

источник

2013-04-19 17:46:47 Eli

Проблема с этим решением заключается в том, что если вы заполните правую панель еще более датой, страница не будет следовать за правой панелью. – Banshee

Как получить оба div, чтобы они были одинаковой высоты

ответ

Смежные вопросы