页面大小改变时页头重叠内容HTML
我有一个问题,我希望我的页眉被固定到Web浏览器的顶部,与我制作的导航栏相同。问题是,当我更改Web浏览器的大小时,标题将覆盖内容并移动导航栏。我该如何解决这个问题?页面大小改变时页头重叠内容HTML
<body>
<h1>Knox Enterprises Inc.</h1>
<div class="nav">
<a href="index.html">Home</a>
<a href="About.html">About</a>
<a href="Contact.html">Contact</a>
</div>
<div class="adjust">
<div class="home">
<div class="home-pictures">
<img src="http://i64.tinypic.com/14o91c1.jpg" width="300px" height="225px">
<img src="http://i63.tinypic.com/2rpzh3p.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="http://i68.tinypic.com/rswqoy.jpg" width="300px" height="225px">
<img src="http://i66.tinypic.com/2lm8bdg.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Riveredge, NJ</h5>
<h5>Date Completed: June 2014</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_5.jpg" width="300px" height="225px">
<img src="home_6.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_7.jpg" width="300px" height="225px">
<img src="home_8.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Teaneck, NJ</h5>
<h5>Date Completed: March 2015</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_9.jpg" width="300px" height="225px">
<img src="home_10.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_11.jpg" width="300px" height="225px">
<img src="home_12.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Tenafly, NJ</h5>
<h5>Date Completed: August 2016</h5>
</ul>
</div>
</div>
</body>
和我的CSS代码是
html, body {
margin: 0;
padding: 0;
background-image:url("backround.jpg");
background-repeat: repeat-y;
}
/*Knox Header*/
h1 {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
}
/*Nav Menu/Home Page*/
.nav {
position:fixed;
padding-top:78px;
background-image:#606060;
overflow: hidden;
}
.nav a {
font-family: Helvetica;
background-color:black;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 12px;
text-decoration: none;
font-size: 12px;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
border-top: 2px solid orange;
letter-spacing: 2px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.home {
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
}
.home-pictures, .home-pictures2{
height:auto;
width:auto;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.home img {
border: 1px solid white;
}
.home-description {
line-height: 0px;
color: white;
letter-spacing: 2px;
font-family: Helvetica;
font-size: 18px;
}
把这两样元素的容器内,使这个容器固定而不是使用两个元素与position: fixed
。 它们都没有流动,因此它们不会受到彼此的影响(因此当内容没有足够宽度时导航栏将与h1重叠,因此它必须断开线路)
我想通过包装你的头和导航栏在它自己的标签入手,如:
<header class='header-fixed'>
<h1>Knox Enterprises Inc.</h1>
<div class="nav">
<a href="index.html">Home</a>
<a href="About.html">About</a>
<a href="Contact.html">Contact</a>
</div>
</header>
然后,你只需要担心的一个固定位置的元素。
从那里,你有一些选择。
你可以使用JavaScript来监视窗口尺寸并调整对您的相应的margin-top。
你可以确定你的标题在普通浏览器尺寸上的高度,并使用media queries来调整其余的。
编辑:
其实,你知道什么会更容易?
<header>
...
</header>
<div id="Content">
...
</div>
header {
height: 120px;
}
#content {
height: calc(100% - 120px);
overflow-y: scroll;
}
如果你能找出你的头究竟有多高,那么你可以使用计算()来设置你的内容的其余部分的高度,实际上使该分区的一部分滚动。那时,你不需要固定位置。
好吧,我会尝试做一些这些。我对HTML很陌生,所以需要研究如何做媒体查询。 –
其实,你知道什么会更容易吗?
生病尝试并执行此操作。 –
为您的内容提供等于或高于标题高度的边距。让它随着媒体查询或与js的调整大小 – buxbeatz
这里是摆弄解决方案https://jsfiddle.net/stqo2mxk/ praticly柯克哈登解决方案实施 – buxbeatz
还没有将java纳入我的html,但生病尝试这可能。谢谢。 –