页面大小更改时的标题重叠内容HTML_Html_Css

页面大小更改时的标题重叠内容HTML

html css

页面大小更改时的标题重叠内容HTML,html,css,Html,Css,我有一个问题，我想我的标题被固定到网页浏览器的顶部，与导航栏我做的相同。问题是，当我更改web浏览器的大小时，标题会覆盖内容并移动导航栏。我怎样才能解决这个问题 <body> <h1>Knox Enterprises Inc.</h1> <div class="nav"> <a href="index.html">Home</a> <a href="About.html"

我有一个问题，我想我的标题被固定到网页浏览器的顶部，与导航栏我做的相同。问题是，当我更改web浏览器的大小时，标题会覆盖内容并移动导航栏。我怎样才能解决这个问题

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

将两个元素都放在一个容器中，并将此容器固定，而不是使用两个元素，位置为：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来观察窗口的大小，并相应地调整页面的页边距顶部

您可以计算出在常见浏览器大小下标题的确切高度，并使用来调整其余部分

编辑：

事实上，你知道什么更容易吗

<header>
  ...
</header>
<div id="Content">
  ...
</div> 

header { 
  height: 120px; 
} 
#content { 
  height: calc(100% - 120px); 
  overflow-y: scroll; 
}


...
...
标题{
高度：120px；
} 
#内容{
高度：计算（100%-120px）；
溢出y：滚动；
}

如果您能够准确地计算出标题的高度，那么可以使用calc（）设置其余内容的高度，并实际使该div成为滚动的部分。在这一点上，您不需要固定的定位

为内容提供等于或高于页眉高度的页边距。通过媒体查询或使用jshere调整大小来改变它是一种很麻烦的解决方案。实际上，Kirk Hadden实现的解决方案还没有将java合并到我的html中，但我可能会尝试一下。谢谢。好的，我试着做一些。我对HTML有点陌生，所以需要研究如何进行媒体查询。实际上，你知道什么更容易吗？标题{height:120px；}内容{height:calc（100%-120px）；overflow-y:scroll；}我将尝试实现这个。嘿，这似乎解决了问题！谢谢@Kirk Hadden

<header>
  ...
</header>
<div id="Content">
  ...
</div> 

header { 
  height: 120px; 
} 
#content { 
  height: calc(100% - 120px); 
  overflow-y: scroll; 
}