ズームするときにもう1つのdivを引き継ぐ

私がズームアウトしているとき、下のページの画像が上の私の他の画像（背景）を引き継いでいます。ズームインするときに、右側に空白があります。私のフッタも欠けている。これを修正するには？ https://jsfiddle.net/egdeLy1c/ズームするときにもう1つの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を追加する必要があります。ここでは、あなたが常に同じ高さにそれをしたい場合は、％-heightを追加しない明確な修正についての詳細を読み、

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

とヘッダ-IMGのために浮くことができます。ピクセルで固定された高さで移動します。たとえば、750ピクセルです。

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

ズームするときにもう1つのdivを引き継ぐ

答えて

関連する問題