标题不断扩大到浏览器窗口之外

我的新投资组合网站应该有一个标题，其中包含我的名字，主导航和社交菜单。所以我用三个div做了个头，每个div宽度为33％。现在我的问题是，只要我放置位置：固定在那里头部不断扩大到完全的位置。这只是我应用一些填充或边距的情况，所以这可能是我的问题，但我不知道如何解决这个问题，现在让我疯狂几个小时。也许你们有些人可以帮忙？将不胜感激！标题不断扩大到浏览器窗口之外

<!DOCTYPE html> 
<html lang="en" class="no-js"> 

<body> 
    <div class="container"> 
     <div class="header"> 

      <div class="site-title"> 
       Hello World 
      </div> 

      <div class="main-menu"> 
      <ul class="main-menu"> 
       <a href="work.html"><li>Work</li></a> 
       <a href=""><li>Curriculum</li></a> 
       <a href="contact.html"><li>Contact</li></a> 
      </ul> 
      </div> 

      <div class="social-menu"> 
      <ul class="social-menu"> 
       <a href="#"><li class="fa fa-envelope"></li></a> 
       <a href="#"><li class="fa fa-twitter"></li></a> 
       <a href="#"><li class="fa fa-dribbble"></li></a> 
       <a href="#"><li class="fa fa-youtube-play"></li></a> 
       <a href="#"><li class="fa fa-500px"></li></a> 
      </ul> 
      </div> 

     </div> 

     <div class="content"> 
     </div> 

    </div> 

</body> 
</html> 

*{ 
    margin: 0em; 
    padding: 0em; 
    border: 0em; 
    text-decoration: none; 
    list-style: none; 
    color: #333; 
} 

html{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

body{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

container{ 
    margin: 3em; 
    overflow: auto; 
} 

.content{ 
    height: 2000px; 
} 

.container:before, 
.container:after { 
    content : ""; 
    display : table; 
} 
.container:after { 
    clear : both; 
} 

.header{ 
    width: 100%; 
    position: fixed; 
    z-index: 100; 
    margin: 3em; 
    background-color: burlywood; 
} 

.site-title{ 
    float:left; 
    display: inline-block; 
    width: calc(100%/3); 
    position: relative; 
    background-color: beige; 
} 

div.main-menu{ 
    margin:0 auto; 
    display: inline-block; 
    width: calc(100%/3); 
    text-align: center; 
    background-color: cadetblue; 
} 

.main-menu a{ 
    display: inline-block; 
} 

div.social-menu{ 
    float: right; 
    width: calc(100%/3); 
    display: inline-block; 
    text-align: right; 
}

来源

2016-11-27 nafets97

Flexbox，就不能正确回答这个问题（这是一个保证金的问题）。 –

您需要从.header中删除边距，但我也将它从.container中移除以保持一致。即使边框运行，您添加的Amy边距将覆盖您的容器宽度，但填充不会。

*{ 
 
    margin: 0em; 
 
    padding: 0em; 
 
    border: 0em; 
 
    text-decoration: none; 
 
    list-style: none; 
 
    color: #333; 
 
} 
 

 
html{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.container{ 
 
    /* margin: 3em; */ 
 
    margin: 0; 
 
    overflow: auto; 
 
} 
 

 
.content{ 
 
    height: 2000px; 
 
} 
 

 
.container:before, 
 
.container:after { 
 
    content : ""; 
 
    display : table; 
 
} 
 
.container:after { 
 
    clear : both; 
 
} 
 

 
.header{ 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 100; 
 
    /*margin: 3em;*/ 
 
    background-color: burlywood; 
 
} 
 

 
.site-title{ 
 
    float:left; 
 
    display: inline-block; 
 
    width: calc(100%/3); 
 
    position: relative; 
 
    background-color: beige; 
 
} 
 

 
div.main-menu{ 
 
    margin:0 auto; 
 
    display: inline-block; 
 
    width: calc(100%/3); 
 
    text-align: center; 
 
    background-color: cadetblue; 
 
} 
 

 
.main-menu a{ 
 
    display: inline-block; 
 
} 
 

 
div.social-menu{ 
 
    float: right; 
 
    width: calc(100%/3); 
 
    display: inline-block; 
 
    text-align: right; 
 
}

<!DOCTYPE html> 
 
<html lang="en" class="no-js"> 
 

 
<body> 
 
    <div class="container"> 
 
     <div class="header"> 
 

 
      <div class="site-title"> 
 
       Hello World 
 
      </div> 
 

 
      <div class="main-menu"> 
 
      <ul class="main-menu"> 
 
       <a href="work.html"><li>Work</li></a> 
 
       <a href=""><li>Curriculum</li></a> 
 
       <a href="contact.html"><li>Contact</li></a> 
 
      </ul> 
 
      </div> 
 

 
      <div class="social-menu"> 
 
      <ul class="social-menu"> 
 
       <a href="#"><li class="fa fa-envelope"></li></a> 
 
       <a href="#"><li class="fa fa-twitter"></li></a> 
 
       <a href="#"><li class="fa fa-dribbble"></li></a> 
 
       <a href="#"><li class="fa fa-youtube-play"></li></a> 
 
       <a href="#"><li class="fa fa-500px"></li></a> 
 
      </ul> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="content"> 
 
     </div> 
 

 
    </div> 
 

 
</body> 
 
</html>

来源

2016-11-27 18:06:35

首先感谢您的回答，我现在尝试删除边缘，如您所建议的，它与添加一个填充到标题（认为我已经尝试过，但没关系）。当向整个容器添加填充时，标题仍然不正确，不太确定原因。 – nafets97

可以将填充添加到整个容器或其中的单个填充，但不能同时添加填充。一致性是关键。你有一个你已经尝试过的，你可以展示的网址吗？ –

标题不断扩大到浏览器窗口之外

回答

相关问题