最小化窗口的所有内容被挤压

我是HTML和CSS的初学者。当我尝试最小化窗口时，页脚上的内容堆叠在一起。另外，当我最小化将底部移动到顶部时，页脚也被推到顶部。最小化窗口的所有内容被挤压

下面是链接到HTML和CSS

谢谢

<!DOCTYPE html> 
<html> 
    <head> 
     <title> Samuel Selvarajah</title> 
     <link rel="shortcut icon" href="Logo.ico"> 
     <link rel="stylesheet" type="text/css" href="homepage.css"> 
     <link rel="stylesheet" type="text/css" href="bootstrap.css"> 
     <link rel="stylesheet" type="text/css" href="bootstrap-responsive... 

    </head> 

    <body> 
     <div class = "container"> 
     <div id = "menu-bar"> 
      <img src = "Logo1.ico"/> 
      <ul> 
       <li> about </li> 
       <li> projects </li> 
       <li> resume </li> 
       <li> contact </li> 
      </ul> 
      <p id = "linkin"><strong> in </strong></p> 
      <p id = "facebook"><strong> f </strong></p> 
      <img id = "github" src = "25231.png"/> 
     </div> 
     <div id = "footer"> 
      <ul> 
       <li> about </li> 
       <li> projects </li> 
       <li> resume </li> 
       <li> contact </li> 
      </ul> 
     </div> 
    </div> 

    </body> 

</html> 



body{ 
background-image: url("hp.jpg"); 
background-repeat: no-repeat; 
background-size: cover; 
overflow:auto; 
} 

.container{ 
width: 700px; 
height: 700px; 
} 

#menu-bar{ 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 85px; 
background-image: url("http://i.stack.imgur.com/C5qGr.png");  
} 

div img{ 
position: fixed; 
zoom: 30%; 
top: 10px; 
left: 350px; 
} 

#menu-bar ul{ 
list-style-type: none; 
margin: 0px; 
padding: 0px; 
position: relative; 
left: 400px; 
top: 30px; 
} 

#menu-bar li{ 
display: inline; 
font-family: Trebuchet MS; 
font-size: 18px; 
padding: 26px; 
color: white; 
} 

#linkin{ 
position: fixed; 
margin: 0px; 
padding:0px; 
font-family: Segoe UI, Myriad Pro, Myriad, Liberation Sans, Nimbus Sans L, Helvetica Neue, Helvetica, Arial, sans-serif; 
color: white; 
top: 28px; 
left: 1130px; 
font-size: 33px; 
} 

#facebook{ 
position: relative; 
margin: 0px; 
padding:0px; 
font-family: Segoe UI, Myriad Pro, Myriad, Liberation Sans, Nimbus Sans L, Helvetica Neue, Helvetica, Arial, sans-serif; 
color: white; 
top: 8px; 
left: 1040px; 
font-size: 33px; 
} 

#github{ 
position: fixed; 
left: 7180px; 
zoom: 15%; 
top: 150px; 
} 

#footer{ 
position: absolute; 
bottom: -200px; 
left: 0px; 
width: 100%; 
height: 39px; 
background-image: url("http://i.stack.imgur.com/C5qGr.png"); 

} 

#footer ul{ 
list-style-type: none; 
margin: 0px; 
padding: 0px; 
bottom: 10px; 
left: 435px; 
position: absolute; 
} 

#footer li{ 
display: inline; 
font-family: Trebuchet MS; 
padding: 18px; 
font-size: 16px; 
position: relative; 
color: white; 
}

来源

2015-08-28 S.Selvar

最后一个CSS'bootstrap-response.css'中有空格，它不应该是 – Tushar

这个html的样式在哪里？ –

欢迎来到Stack Overflow！绝对/固定位置是布局网页的非常糟糕的方法。它非常不灵活，并且有更好更快的响应选项。尝试[** LearnLayout.com **]（http://learnlayout.com/） –

见this。

它需要很多改进，但它会让你开始。

也请尽量不要在您的css中使用ID（＃）。

Further reading。

.content { 
    height: 400px; 
    width: 100%; 
} 
.logo { 
    padding: 15px; 
    float: left; 
} 
.menu-bar{ 
    background-image: url("http://i.stack.imgur.com/C5qGr.png"); 
    height: 50px; 
    width: 100%; 
} 
.menu-bar li { 
    display: inline; 
    text-align: center; 
    float: right; 
    padding: 15px; 
} 
.footer { 
    background: #ededed; 
    height: 40px; 
    width: 100%; 
    left: 0; 
    box-shadow: 0px -0.8px 0px #c6c6c6; 
    overflow: hidden; 
} 
.footer li { 
    display: inline; 
}

来源

2015-08-28 03:47:15 kalpetros

我试着用你添加的属性改变它，并且所有的内容都是乱码。 –

它应该工作正常。确保没有拼写错误，并且每个标签都有结束标签。 – kalpetros

只是为了测试它我从jsFiddle复制了html和css，并且它都是混乱的，而且问题还没有真正解决。即使您查看jFiddle站点上的输出，如果您最大限度地减少堆叠在彼此之上的内容。 –

最小化窗口的所有内容被挤压

回答

相关问题