页面大小改变时页头重叠内容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; 
     }

来源

2017-06-19 A.Student

为您的内容提供等于或高于标题高度的边距。让它随着媒体查询或与js的调整大小 – buxbeatz

这里是摆弄解决方案https://jsfiddle.net/stqo2mxk/ praticly柯克哈登解决方案实施 – buxbeatz

还没有将java纳入我的html，但生病尝试这可能。谢谢。 –

把这两样元素的容器内，使这个容器固定而不是使用两个元素与position: fixed。它们都没有流动，因此它们不会受到彼此的影响（因此当内容没有足够宽度时导航栏将与h1重叠，因此它必须断开线路）

https://jsfiddle.net/7ntdes6t/

来源

2017-06-19 20:53:05 puelo

我想通过包装你的头和导航栏在它自己的标签入手，如：

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

如果你能找出你的头究竟有多高，那么你可以使用计算（）来设置你的内容的其余部分的高度，实际上使该分区的一部分滚动。那时，你不需要固定位置。

来源

2017-06-19 20:54:37

好吧，我会尝试做一些这些。我对HTML很陌生，所以需要研究如何做媒体查询。 –

其实，你知道什么会更容易吗？

头{高度：120像素; } ＃content {height：calc（100％ - 120px）; overflow-y：scroll; } –

生病尝试并执行此操作。 –

页面大小改变时页头重叠内容HTML

回答

相关问题