绝对定位不扩展

发布于 2024-12-18 14:19:46 字数 1878 浏览 0 评论 0原文

我有以下代码:

<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 div 的高度相同。如果我删除 #display_vendors_container 上的绝对定位,它会显示所有内容,但不在正确的位置。关于可能导致这种情况的原因有什么想法吗?

I have the following code:

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

Then I have the following 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;
}

Now my issue is that the #display_vendors_container won't display the whole content of the div. It will only make it the same height as the #display_vendors div. If I remove the absolute positioning on the #display_vendors_container it displays all the content but not in the right place. Any ideas on what could be causing this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

暮光沉寂 2024-12-25 14:19:46

高度:100%; #display_vendors_container 是你的问题;删除它就可以了。

证明: http://jsfiddle.net/w3LSV/

The height: 100%; in #display_vendors_container is your problem; delete it and it will be fine.

Proof: http://jsfiddle.net/w3LSV/

白首有我共你 2024-12-25 14:19:46

在你的 CSS 中添加:

body, html {height:100%}

In your CSS add:

body, html {height:100%}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文