Абсолютное позиционирование не расширяется - PullRequest
0 голосов
/ 29 ноября 2011

У меня есть следующий код:

<div id="display_vendors">
<ul class="vendor_types">
<li>Category 1</li>                         
</ul>
</div>
<div id="display_vendors_container">
<h4>Search Results</h4><br>Here are your search results! You can simply navigate to the other categories by clicking on one on the left hand side:<br><br><br><br><br><br><br><br><br>Testing<br><br><br><br><br>More<br><br><br><br><br><br><br><br>Sljf
</div>

Тогда у меня есть следующий CSS:

#display_vendors ul.vendor_types li {
background-color:#000000;
color:#FFFFFF;
width:200px;
line-height:1.5em;
margin:2px 0 0 0;
padding:10px;
border-width:1px;
border-color:#000000;
border-style:solid;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
display:block;
height:100%;
}

#display_vendors ul.vendor_types li:hover {
background-color:#949494;
}

#display_vendors_container{
position:absolute;
top:59px;
left:221px;
width:700px;
height:100%;
border-width:1px;
border-color:#000000;
border-style:solid;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-topleft: 0;
border-radius: 10px;
border-top-left-radius: 0;
padding:10px;
min-height:400px;
}

.dispay_vendor_type {
color:#FFFFFF;
text-decoration:underline;
}

.dispay_vendor_type:hover {
color:#FFFFFF;
text-decoration:underline;
}

Теперь моя проблема в том, что #display_vendors_container не будет отображать весь контентдив.Он будет иметь только ту же высоту, что и div #display_vendors.Если я удаляю абсолютное позиционирование на #display_vendors_container, он отображает весь контент, но не в нужном месте.Любые идеи о том, что может быть причиной этого?

Ответы [ 2 ]

1 голос
/ 29 ноября 2011

высота: 100%; в #display_vendors_container ваша проблема; удали его и все будет хорошо.

Доказательство: http://jsfiddle.net/w3LSV/

0 голосов
/ 29 ноября 2011

В вашем CSS добавьте:

body, html {height:100%}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...