一個div在縮放時接管另一個

縮小時，底部的頁面圖像正在接管頂部的其他圖像（背景）。當我放大時，右側有空白區域。而且我的頁腳也不見了。如何解決這個問題？ https://jsfiddle.net/egdeLy1c/一個div在縮放時接管另一個

body { 
 
    margin: 0px; 
 
} 
 

 
/* Properties for background image here */ 
 
#wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://citywallpaperhd.com/download/71-huge-impressive-city-at-night.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 

 
#logo { 
 
    padding-top: 30px; 
 
    padding-left: 25px; 
 
    float: left; 
 
} 
 

 

 
#navigation { 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: #000000; 
 
} 
 

 
#navigation ul { 
 
    margin: 0px; 
 
    padding: 30px; 
 
    text-align: center; 
 
    list-style-type: none; 
 
} 
 

 
#navigation li { 
 
    width: 15%; 
 
    font-size: 18px; 
 
    padding: 0px 0px; 
 
    display: inline-block; 
 
    color: #ffffff; 
 
} 
 

 
#navigation a { 
 
    padding: 5px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
} 
 

 
#navigation a.current { 
 
    color: #000000; 
 
    background-color: #ffffff; 
 
    border-radius: 8px; 
 
} 
 

 
#navigation a:hover { 
 
    color: #ff9900; 
 
} 
 

 

 
#banner-text { 
 
    width: 1200px; 
 
    margin: 250px 50px; 
 
    font-size: 42px; 
 
    color: #ffffff; 
 
} 
 

 
#banner-text p { 
 
    width: 800px; 
 
    font-size: 24px; 
 
    line-height: 24px; 
 
} 
 

 

 
#main-content img, #main-content-2 img{ 
 
    width: 50%; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 

 
#footer { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #000000; 
 
}

<body> 
 
    <div id="wrapper"> 
 
     <nav id="navigation"> 
 

 
      <img id="logo" src="img/logo.png"/> 
 

 
      <ul> 
 
       <li><a class="current" href="index.html">Home</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
      </ul> 
 
     </nav> 
 

 
     <div id="banner-text"> 
 
      <h1>h1 text</h1> 
 
      <p> 
 
       text text text text text text text text text text text text text text text text text text 
 
       text text text text text text text text text text text text text text text text text text 
 
      </p> 
 
     </div> 
 
    </div> 
 

 
    <div id="main-content"> 
 
     <img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/> 
 
    </div> 
 
    
 
    <div id="main-content-2"> 
 
    <img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/> 
 
    </div> 
 

 
    <div id="footer"> 
 

 
    </div> 
 

 
    </body>

來源

2017-04-22 PoorProgrammer

嘿:)我不能重現了問題變焦。但我把你的腳擡回去了。

如果你是浮動元素，你需要添加一個Clearfix給他們。在這裏，你可以閱讀更多關於明確修復和漂浮

https://www.w3schools.com/css/css_float.asp

而對於頭-IMG如果你想它總是相同的高度不添加％-height。以像素爲固定高度去...例如750px。

body { 
 
    margin: 0px; 
 
} 
 

 
/*Clearfix*/ 
 

 
    .clearfix::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
/* Properties for background image here */ 
 
#wrapper { 
 
    width: 100%; 
 
    height: 750px; 
 
    background-image: url("http://citywallpaperhd.com/download/71-huge-impressive-city-at-night.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 

 
#logo { 
 
    padding-top: 30px; 
 
    padding-left: 25px; 
 
    float: left; 
 
} 
 

 

 
#navigation { 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: #000000; 
 
} 
 

 
#navigation ul { 
 
    margin: 0px; 
 
    padding: 30px; 
 
    text-align: center; 
 
    list-style-type: none; 
 
} 
 

 
#navigation li { 
 
    width: 15%; 
 
    font-size: 18px; 
 
    padding: 0px 0px; 
 
    display: inline-block; 
 
    color: #ffffff; 
 
} 
 

 
#navigation a { 
 
    padding: 5px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
} 
 

 
#navigation a.current { 
 
    color: #000000; 
 
    background-color: #ffffff; 
 
    border-radius: 8px; 
 
} 
 

 
#navigation a:hover { 
 
    color: #ff9900; 
 
} 
 

 

 
#banner-text { 
 
    width: 1200px; 
 
    margin: 250px 50px; 
 
    font-size: 42px; 
 
    color: #ffffff; 
 
} 
 

 
#banner-text p { 
 
    width: 800px; 
 
    font-size: 24px; 
 
    line-height: 24px; 
 
} 
 

 

 
#main-content img, #main-content-2 img{ 
 
    width: 50%; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 

 
#footer { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #000000; 
 
}

<body> 
 
    <div id="wrapper"> 
 
     <nav id="navigation"> 
 

 
      <img id="logo" src="img/logo.png"/> 
 

 
      <ul> 
 
       <li><a class="current" href="index.html">Home</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
      </ul> 
 
     </nav> 
 

 
     <div id="banner-text"> 
 
      <h1>h1 text</h1> 
 
      <p> 
 
       text text text text text text text text text text text text text text text text text text 
 
       text text text text text text text text text text text text text text text text text text 
 
      </p> 
 
     </div> 
 
    </div> 
 

 
    <div id="main-content" class="clearfix"> 
 
     <img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/> 
 
    </div> 
 
    
 
    <div id="main-content-2" class="clearfix"> 
 
    <img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/> 
 
    </div> 
 

 
    <div id="footer"> 
 

 
    </div> 
 

 
    </body>

來源

2017-04-22 09:44:01 RacoonOnMoon

我現在完成編輯：D現在你可以檢查出來。移動設備上的編碼非常糟糕 – RacoonOnMoon

一個div在縮放時接管另一個

回答

相關問題