100% 2 Высота столбца CSS Проблема!

Question

Я использую это layout для создания 2-полосной жидкостной веб-страницы.

То, что я не могу сделать, это сделать так, чтобы обе колонки в макете имели высоту 100%, поэтому нажатие нижнего колонтитула на нижнюю часть страницы!

Каков наилучший способ достижения этого эффекта?

Заранее благодарен!

Answer 1

надеюсь, это то, что вы ищете:

http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

Answer 2

Попробуйте другую раскладку, зачем тратить свое время, пытаясь взломать решение кросс-браузер?
Это, кажется, что вам нужно, но я уверен, что вы можете найти другие: http://www.savio.no/examples/three-column-layout-6.asp

Answer 3

я делаю следующее в CSS моего персонального сайта file:

#footer 
{width: 100%; 
bottom: 0px; 
padding-top: .5em; 
padding-bottom: .5em; 
background-color: #ffffff; 
border-top: 1px #000000 solid; 
text-align: center; 
margin-top: .25em; 
} 

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

Answer 4

имеют 2 Div метки, каждый в качестве колонки с плавающей рядом друг с другом, а другой сНу тег, чтобы очистить поплавки, затем, наконец другой DIV быть сноска:

<div id="col1"></div> 
<div id="col2"></div> 
<div clear="c"></div> 
<div id="footer"></div> 
<style type="text/css"><!-- 
#col1{ 
    float:left; 
    width:80%; 
} 
#col2{ 
    float:right; 
    width:20%; 
} 
.c{ 
    clear:both; 
} 
#footer{} 
--></style> 

С этим, это также легче чтобы сделать его 3 столбцом.

<div id="col1"></div> 
<div id="col2"></div> 
<div id="col3"></div> 
<div clear="c"></div> 
<div id="footer"></div> 
<style type="text/css"><!-- 
#col1{ 
    float:left; 
    width:200px; 
} 
#col2{ 
    float:right; 
    width:300px; 
} 
#col3{ 
    width:400px; 
    margin-left:200px; 
    margin-right:300px; 
} 
.c{ 
    clear:both; 
} 
#footer{} 
--></style> 

Answer 5

Вот еще один способ ...

<div id="container"> 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 
<div id="footer"></div> 

<style type="text/css"><!-- 
    body { height: 100% } 
    #container { height: 100% } 
    #col1 { height:100%; float:left; width: 70% } 
    #col2 { height:100%; float:right; width: 30% } 
    #footer { height: 50px; clear: both } 
--></style> 

Answer 6

Последний раз, когда я читал об этом лучший ответ был display: table; для основного контейнера и display: table-cell; для каждого столбца. Это сделает столбец указанной вами высотой.

#wrap { 
 
    background: orange; 
 
    display: table; 
 
    height: 88%; 
 
    width: 550px; 
 
    padding: 11px; 
 
} 
 
#col1 { 
 
    display:table-cell; 
 
    background: #808080; 
 
    width: 222px; 
 
    border: 1px solid #FFF; 
 
    padding: 12px; 
 
} 
 
#col2 { 
 
    display:table-cell; 
 
    background: #808080; 
 
    width: 111px; 
 
    border: 1px solid #FFF; 
 
    padding: 12px; 
 
}

<!-- this container will determine the height of both columns --> 
 
<div id="wrap"> 
 

 
    <div id="col1"> 
 
    <p>Lorem ipsum something or other.</p> 
 
    </div> 
 

 
    <div id="col2"> 
 
    <p>More Lorem than ipsum.</p> 
 
    </div> 
 

 
</div> 
 
<!-- end container -->

Answer 7

Try: overflow:hidden; на обертке. Надеюсь, что это поможет

Answer 8

Только что сделано jsfiddle от Matthew James Taylor post. Для меня это было очень полезно. Я думаю, что это не проблема переделать для двух столбцов.

<div id="container3"> 
<div id="container2"> 
    <div id="container1"> 
     <div id="col1"><p>Column 1</p> 
      <p>Nunc egestas, vut mus hac diam lacus lacus nisi odio, 
       turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis 
       hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,  
       magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus 
       proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est? 
       Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum 
       eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut  
       porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc 
       in nec, dictumst 
       pulvinar proin! In nisi pulvinar penatibus lorem nec, tempor porta 
       ultricies, et monte.a asdfjasdjfklasdfasdfljsdfkj</p> 
     </div> 
     <div id="col2"> 
      <p>Column 2 </p> 
      <p>Nunc egestas, vut mus hac diam lacus lacus nisi odio, 
       turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis 
       hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,  
       magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus 
       proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est? 
       Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum 
       eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut  
       porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc          
     </div> 
     <div id="col3">Column 3</div> 
    </div> 
</div> 

#container3 { 
    float:left; 
    width:100%; 
    background:green; 
    overflow:hidden; 
    position:relative; 
} 
#container2 { 
    float:left; 
    width:100%; 
    background:yellow; 
    position:relative; 
    right:30%; 
} 
#container1 { 
    float:left; 
    width:100%; 
    background:red; 
    position:relative; 
    right:40%; 
} 
#col1 { 
    float:left; 
    width:26%; 
    position:relative; 
    left:72%; 
    overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:36%; 
    position:relative; 
    left:76%; 
    overflow:hidden; 
} 
#col3 { 
    float:left; 
    width:26%; 
    position:relative; 
    left:80%; 
    overflow:hidden; 
}​