ページ下部のフッター

ページの下部にフッターを配置しようとしています。ページ下部のフッター

マイHTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 

    <body> 
    <div id="main"> 
     <header id="main__header"> 
     <div id="logo"></div> 
     <div id="search"> 
      <form> 
      <input type="text" value="Search..." /> 
      </form> 
     </div> 

     <nav> 
      <ul> 
      <li id="home"><a href="#">Home</a></li> 
      <li id="about"><a href="#">About Us</a></li> 
      <li id="carrers"><a href="#">Carrers</a></li> 
      <li id="newsletter"><a href="#">Newsletter</a></li> 
      <li id="contact"><a href="#">Contact</a></li> 
      </ul> 
     </nav> 
     </header> 

     <section id="body__section"> 

     <section id="left__section" class="margin__section"> 
      <article id="news1"> 
      <img src="images/pic.jpg" width="200" height="170" alt="pic1" /> 
      <header> </header> 
      <div> 
       <p> </p> 
      </div> 
      </article> 

      <article id="news2"> 
      <img src="images/pic.jpg" width="200" height="170" alt="pic2" /> 
      <header> </header> 
       <div> 
       <p> </p> 
       </div> 
      </article> 

      <article id="news3"> 
       <img src="images/pic.jpg" width="200" height="170" alt="pic2" /> 
       <header> </header> 
       <div> 
       <p> </p> 
       </div> 
      </article> 

      <article id="news4"> 
       <img src="images/pic.jpg" width="200" height="170" alt="pic3" /> 
       <header> </header> 
       <div> 
       <p> </p> 
       </div> 
      </article> 
      </section> 

      <section id="right__section" class="margin__section"> 
      <aside id="social"></aside> 
      <aside class="ad"></aside> 
      <aside class="ad"></aside> 
      </section> 

     </section> 

     <footer> </footer> 

     </div>  
    </body> 
    </html>

私のstyle.css

* { 
    margin: 0; 
    padding: 0; 
} 

html, body, #main { 
    height: 100%; 
} 

html, body, #main_header, nav, ul, footer { 
    width: 100%; 
} 

#main { 
    position: relative; 
    margin: 0 auto; 
    width: 1100px; 
} 

#main__header { 
    position: relative; 
    height: 180px; 
    margin: 0 auto; 
    background-color: #ff532a; 
} 

#logo { 
    position: relative; 
    top: 5px; 
    left: 20px; 
    border: 1px solid #fff; 
    width: 206px; 
    height: 75px; 
} 

#search { 
    position: absolute; 
    top: 5px; 
    right: 20px; 
} 

nav { 
    position: absolute; 
    bottom: 10px; 
} 

ul { 
    display: block; 
    list-style-type: none; 
    clear: right; 
    width: 1061px; 
    margin: 0 auto; 
} 

nav ul li { 
    display: block; 
    width: 209px; 
    float: left; 
    margin-left: 4px; 
} 

#home { 
    margin-left: 0px !important; 
} 

nav ul li a { 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    color: #fff; 
    font-size: 1.4em; 
    height: 35px; 
    padding: 5px; 
    border: 1px solid #fff; 
    border-radius: 8px; 
} 

#body__section { 
    width: 100%; 
    height: 100%; 
    padding-bottom: 20px; 
} 

#left__section { 
    width: 810px; 
    height: 100%; 
    float: left; 
} 

#right__section { 
    width: 250px; 
    height: 100%; 
    float: right; 
    border-top: 1px solid #d2d3d2; 
} 

.margin__section { 
    margin-top: 30px; 
} 


article { 
    position: relative; 
    border-top: 1px solid #d2d3d2; 
    border-bottom-width: thin; 
    height: 230px; 
    width: 100%; 
} 

section article img { 
    margin: 30px; 
} 

section article div { 
    position: absolute; 
    top: 30px; 
    right: 0px; 
    width: 550px; 
    height: 170px; 
    background-image: url('images/article.jpg'); 
} 

.border__solid { 
    border: 1px solid #000; 
} 

#right__section aside { 
    width: 100%; 
    margin-top: 30px; 
} 

#social { 
    height: 50px; 
    background-color: #e7e8e7; 
} 

.ad { 
    height: 377px; 
    background-color: #ffffa1;  
} 

footer { 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: 180px; 
    background-color: #beb0ff; 
}

問題はグレーのフッターセクションの下中央にとどまるということです。私は実際にはフッターがページの一番下にあることを望んでいますが、固定されていません。

screenshot

出典

2017-03-18 anon123

あなたのフッタに 'position：absolute'を追加してみてください – mickdev

私は絶対位置で多くのバージョンを試してみました。 – anon123

これらの変更：

#main { 
    position: relative; 
    margin: 0 auto; 
    height: auto; //changing to auto 
    width: 1100px; 
} 

footer { 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: 180px; 
    background-color: #beb0ff; 
    position: relative; //changing to relative 
    clear: both; //clearing previous divs 
}

これは役に立ちます。

出典

2017-03-18 15:53:22 Mark

ようこそ。必ず回答してください！ – Mark

あなたは「クリア：両方」を持つ要素を追加する必要があり、あなたの収納部の内側に持っている2つの浮動セクションの後。次に、コンテナセクションから「高さ：100％」を削除する必要があります。

だから、あなたのCSSに追加します。ちょうど "body__section" の終了前に、

#body__section { 
    width: 100%; 
    height: auto; 
    padding-bottom: 20px; 
}

し、HTMLに追加します：

.clear { 
    clear: both; 
}

がにあなたの "#body__section" に変更し

あなたのために物事を修正します

<div class="clear"></div>

出典

2017-03-18 15:32:38

これは機能します！ありがとう！ – anon123

私はこのCSSを使用することをお勧めします...

#main { 
    position: relative; 
    margin: 0 auto; 
    width: 1100px; 
    min-height: 100%; 
    padding-bottom: 180px; 
} 
footer { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: 180px; 
    background-color: #beb0ff; 
}

...と、このルールのうち、」主な要素を取る：それは

html, body { 
    height: 100%; 
}

になり

html, body, #main { 
    height: 100%; 
}

これは、フッターをの子に置き、完全にその底に位置し、十分なpadding-bottomの#mainの上に重なり（フッタの高さのような180px）を防止し、#mainの場合はmin-heightを100％とし、それほど高くないページの下部にもフッタが確実に存在するようにします。

出典

2017-03-18 16:03:11 Johannes

それは働かなかった。 – anon123

答えて

関連する問題