设置弹性div的高度
我对 Javascript 很陌生,需要一些帮助!我遇到的问题根源于我的幻灯片标题。我需要将标题的宽度设置为 100%,以便它占据整个屏幕。然而,因为它是幻灯片,所以我的图像都是绝对定位的,这使我的标题 div 脱离了其他所有内容的流动,因此内容重叠并且看起来很混乱。
我现在有一个廉价且蹩脚的“修复”,我将页脚的边距顶部设置为 38% 以补偿页眉。但在高分辨率下,这不起作用,而且仍然重叠。
我想要做的是使用 Javascript 或 JQuery 检测幻灯片中图像的高度(根据浏览器的宽度而变化),然后将标题的高度设置为该值,从而消除我蹩脚的 CSS 创可贴并没有真正按照我需要的方式工作。
这是该网站,因此您可以了解我正在处理的内容: http://www.legacyofdesigns.com/
HTML:
<div id="header">
<img src="images/header1.png" alt="" class="active" />
<img src="images/header2.png" alt="" />
<img src="images/header3.png" alt="" />
<img src="images/header4.png" alt="" />
<img src="images/header5.png" alt="" />
</div>
<div id="footer">
<ul>
<li><a href="latest-projects.html"><img src="images/project_button.png"></a></li>
<li><a href="start-your-legacy.html"><img src="images/start_button.png"/></a></li>
<li><a href="https://www.facebook.com/legacyofdesigns" target="_blank"><img src="images/facebookFanButton.png"/></a></li>
</ul>
<p>© 2011 Legacy of Designs. All rights reserved.
<br/>Website designed by <a href="http://www.indulgemedia.ca" target="_blank">Indulge Media</a></p>
</div>
CSS:
#header {position: absolute; margin-top: -150px; width: 100%;}
#header img {position: absolute; top: 0px; width: 100%;}
#footer {position: relative; margin-left: auto; margin-right: auto; margin-top: 38%; width: 1000px;}
应该注意的是,两个标题和页脚包含在具有相对定位的容器 div 中。
I am very new to Javascript, and am in need of some assistance! The issue I am having is rooted in my slideshow header. I need my header's width set to 100% so that it occupies the entire screen. However, because it's a slideshow, my images are all absolutely positioned, which takes my header div out of the flow of everything else, and so things overlap and look messy.
I've got a cheap and lame "fix" right now where I've set my footer's margin-top to 38% to compensate for the header. But at high resolutions, this does not work, and it still overlaps.
What I want to do is use Javascript or JQuery to detect the height of the images in the slideshow (which changes depending on the width of the browser) and then set the header's height to that value, thus eliminating my crappy CSS bandaids that aren't really working in the way I need them to.
Here's the site, so you can get a sense of what I am dealing with:
http://www.legacyofdesigns.com/
THE HTML:
<div id="header">
<img src="images/header1.png" alt="" class="active" />
<img src="images/header2.png" alt="" />
<img src="images/header3.png" alt="" />
<img src="images/header4.png" alt="" />
<img src="images/header5.png" alt="" />
</div>
<div id="footer">
<ul>
<li><a href="latest-projects.html"><img src="images/project_button.png"></a></li>
<li><a href="start-your-legacy.html"><img src="images/start_button.png"/></a></li>
<li><a href="https://www.facebook.com/legacyofdesigns" target="_blank"><img src="images/facebookFanButton.png"/></a></li>
</ul>
<p>© 2011 Legacy of Designs. All rights reserved.
<br/>Website designed by <a href="http://www.indulgemedia.ca" target="_blank">Indulge Media</a></p>
</div>
THE CSS:
#header {position: absolute; margin-top: -150px; width: 100%;}
#header img {position: absolute; top: 0px; width: 100%;}
#footer {position: relative; margin-left: auto; margin-right: auto; margin-top: 38%; width: 1000px;}
It should be noted that both the header and the footer are contained by a container div with relative positioning.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我想通了!
CSS:我将 #header 的位置更改为相对...
...并且我添加了此功能来根据 img.active 的高度计算标题 div 的高度:
I figured it out!
The CSS: I changed the position of #header to relative...
...and I added this functionality to calculate the height of the header div based on the height of img.active: