相对于具有响应内容的固定 div 定位 div
[英] Positioning a div relative to a fixed div with responsive content
本文介绍了相对于具有响应内容的固定 div 定位 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个棘手的问题，我似乎无法解决.我对编码比较陌生，所以请耐心等待，因为我会尽力彻底解释我的问题.另外，我确定我的代码非常非常规并且可能不正确！随意对我大喊大叫任何可以更有效的东西，我会做出适当的改变.提前致谢！
在我的网站上，我有一个固定的页脚和一个固定的页眉，其中包含响应式内容.我希望我的网站中间的内容 (div id="color") 完美地定位在我的页眉和页脚上(我在页眉上设置了 margin-bottom，在页脚上设置了 margin-top 以包含 10px在颜色"上方和下方).用我的页脚很容易做到这一点，因为它没有任何响应.包括边距、填充和内容的高度，我的页脚正好是 37 像素，所以我将颜色"的边距底部设置为 37 像素，效果很好.我的问题是我的标题.它具有与页脚相同的 37px 内容，但对于纵向设备，它还有一个宽度为calc(100% - 20px)"的图像，对于横向设备的宽度为 20%方向.因此，标题根据查看设备的分辨率在高度上增长和缩小.计算我的颜色"div 的边距顶部以始终紧靠我的标题(37 像素 + 来自响应式图像的任何高度)的最佳方法是什么?
这是我的 JSFiddle 的链接:https://jsfiddle.net/ujgsrL8b/19/
我无法将图像嵌入 JSFiddle，但我希望所有提供的代码仍然可以解决这个问题.如果有帮助，我的图片是 2828x596px.
此外，我已经阅读了几篇关于类似问题的文章，但没有一篇文章包含与我的问题类似的计算出的响应内容.我希望这是一个简单的修复！
再次感谢各位朋友，非常感谢！
<div id="导航"><ul><li id="项目">项目<ul><li id="one"><a href="one/" class="blocklink"target="_self">ONE
</标题><div id="颜色"><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div><div class="color"></div>
<页脚 id="页脚"><div id="footer-nav"><ul><li id="信息">信息<ul><li id="instagram"><a href="https://www.instagram.com/" target="_blank"class="blocklink">INSTAGRAM</a><li id="电子邮件"><a href="mailto:mail@mail.com"class="blocklink">EMAIL</a>
</页脚>a.nonblocklink {文字装饰:无；颜色:继承；显示:内联块；}a.blocklink {文字装饰:无；颜色:继承；显示:块；}#header {背景颜色:白色；宽度:100%；位置:固定；边距:0px；填充:0px；填充顶部:10px；顶部:0；左:0；文本对齐:居中；z-索引:10；}#logo img {宽度:计算(100% - 20px)；}#logo img:悬停{-webkit-filter:反转(100%)！重要；}#导航{宽度:100%；背景颜色:白色；}#项目{显示:内联块；}#nav ul {字体系列:Arial；字体大小:15px；字体粗细:粗体；颜色:#000000；列表样式类型:无；文本对齐:居中；保证金:自动；填充顶部:6px；填充右:0px；填充底部:10px；填充左:0px；}#nav ul ul {宽度:计算(100% - 20px)；列表样式类型:无；字体粗细:正常；显示:无；}#nav ul li:hover>ul {显示:块；位置:绝对；文本对齐:居中；边距:0 自动；填充顶部:10px；左:0；右:0；}#一 {填充顶部:10px；填充底部:10px；边框:1px纯黑色；颜色:#000000；背景颜色:白色；}#one:悬停{背景颜色:黑色；白颜色;}#页脚{宽度:100%；背景颜色:白色；位置:固定；边距:0px；底部:0；左:0；文本对齐:居中；z-索引:11；}#footer-nav {宽度:100%；}#信息{显示:内联块；填充顶部:10px；}#footer-nav ul {字体系列:Arial；字体大小:15px；字体粗细:粗体；颜色:#000000；列表样式类型:无；文本对齐:居中；保证金:自动；填充顶部:0px；填充右:0px；填充底部:10px；填充左:0px；}#footer-nav ul ul {宽度:计算(100% - 20px)；列表样式类型:无；字体粗细:正常；显示:无；}#footer-nav ul li:hover>ul {显示:块；位置:绝对；底部:100%；文本对齐:居中；边距:0 自动；左:0；右:0；填充底部:0;}#电子邮件 {填充顶部:10px；填充底部:10px；边框:1px纯黑色；颜色:#000000；背景颜色:白色；}#email:hover {背景颜色:黑色；白颜色;}#instagram {填充顶部:10px；填充底部:10px；边框:1px纯黑色；颜色:#000000；背景颜色:白色；}#instagram:悬停{背景颜色:黑色；白颜色;}#颜色 {边距顶部:37px；底边距:37px；填充:0px；顶部:0；左:0；宽度:100%；对齐内容:居中；位置:绝对；}@media 屏幕和(方向:横向){#logo img {宽度:20%；}#nav ul ul {宽度:20%；}#footer-nav ul ul {宽度:20%；}}
解决方案
由于您使用的是普通 JS，我正在更新我的答案.
这适用于您提供的 JSFiddle:
window.addEventListener('load', function() {var headerHeight = document.getElementById('header').clientHeight;document.getElementById("color").style.paddingTop = headerHeight + "px";var footerHeight = document.getElementById('footer').clientHeight;document.getElementById("color").style.paddingBottom = footerHeight + "px";}， 真的);window.addEventListener('resize', function() {var headerHeight = document.getElementById('header').clientHeight;document.getElementById("color").style.paddingTop = headerHeight + "px";var footerHeight = document.getElementById('footer').clientHeight;document.getElementById("color").style.paddingBottom = footerHeight + "px";}， 真的);
只需将其添加到您的 JS 底部即可.希望这会有所帮助.
I have a tricky issue that I cannot seem to beat. I am relatively new to coding so please bear with me as I try my best to thoroughly explain my issue. Also, I'm sure my code is very unconventional and probably incorrect! Feel free to yell at me for anything that can be more efficient and I will make the proper changes. Thank you heaps in advance!
On my website I have a fixed footer and a fixed header with responsive content inside. I want the content in the middle of my website (div id= "color") to be positioned perfectly against my header and my footer (I have the margin-bottom set on my header and margin-top set on my footer to include 10px above and below the "color"). It was easy to accomplish this with my footer because there is nothing responsive in it. Including margin, padding and the content's height, my footer is exactly 37px, so I set the margin-bottom of "color" to 37px and it worked perfectly. My issue is with my header. It has the same 37px of content similar to the footer, but it also has an image with a width of "calc(100% - 20px)" for devices that are in portrait orientation and a width of 20% for devices that are in landscape orientation. Because of this, the header grows and shrinks height-wise depending on the resolution of the viewing device. What is the best way to calculate my "color" div's margin-top to always be right against my header (37px + whatever height comes from the responsive image)?
Here is a link to my JSFiddle: https://jsfiddle.net/ujgsrL8b/19/
I couldn't get the image to embed in the JSFiddle, but I'm hoping all the provided code will still make solving this possible. If it helps, my image is 2828x596px.
Also, I've read a few articles regarding similar issues, but none had any calculated responsive content similar to my issue. I'm hoping this is an easy fix!
Thank you again friends, I appreciate it immensely!
<header id="header">
<div id="logo"> <a href="/" class="nonblocklink"><img alt="A logo."
src="images/logo.png"></a> </div>
<div id="nav">
<ul>
<li id="projects">
PROJECTS
<ul>
<li id="one"> <a href="one/" class="blocklink"
target="_self">ONE</a> </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">
INFO
<ul>
<li id="instagram">
<a href="https://www.instagram.com/" target="_blank"
class="blocklink">INSTAGRAM</a>
</li>
<li id="email">
<a href="mailto:mail@mail.com"
class="blocklink">EMAIL</a>
</li>
</ul>
</li>
</ul>
</div>
</footer>
a.nonblocklink {
text-decoration: none;
color: inherit;
display: inline-block;
}
a.blocklink {
text-decoration: none;
color: inherit;
display: block;
}
#header {
background-color: white;
width: 100%;
position: fixed;
margin: 0px;
padding: 0px;
padding-top: 10px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#logo img {
width: calc(100% - 20px);
}
#logo img:hover {
-webkit-filter: invert(100%) !important;
}
#nav {
width: 100%;
background-color: white;
}
#projects {
display: inline-block;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#nav ul ul {
width: calc(100% - 20px);
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
padding-top: 10px;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: calc(100% - 20px);
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
margin-top: 37px;
margin-bottom: 37px;
padding: 0px;
top: 0;
left: 0;
width: 100%;
align-content: center;
position: absolute;
}
@media screen and (orientation: landscape) {
#logo img {
width: 20%;
}
#nav ul ul {
width: 20%;
}
#footer-nav ul ul {
width: 20%;
}
}
解决方案
As you are using plain JS, I am updating my answer.
This worked on the JSFiddle you provided:
window.addEventListener('load', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("color").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("color").style.paddingBottom = footerHeight + "px";
}, true);
window.addEventListener('resize', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("color").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("color").style.paddingBottom = footerHeight + "px";
}, true);
Just add this at the bottom of your JS. Hope this helps.
这篇关于相对于具有响应内容的固定 div 定位 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
