1. 首页
  2. 问答
  3. Html5的 - 页脚在主要内容

Html5的 - 页脚在主要内容

2017-07-17 29 views
0

我有这个HTML文件的重叠：Html5的 - 页脚在主要内容

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width = device-width"> 
    <meta name="description" content="Some training on web design"> 
    <meta name="keywords" content="web, design"> 
    <meta name="author" content="Houssem badri"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src="js/script.js"></script> 
    <title>My Web design | Welcome</title> 
    </head> 
    <body> 
     <header> 
     <div class="branding"> 
      <h1>Some title</h1> 
     </div> 
     <nav> 
      <ul> 
      <li><a href="#">Contact us</a></li> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a class="current" href="#">Home</a></li> 
      </ul> 
     </nav> 
     </header> 
     <div class="left-col"> 
      <section> 
      <article> 
       <h1>My first article</h1> 
       <p>Some Text</p> 
      </article> 
      <article> 
       <h1>My Second article</h1> 
       <p>Some Text</p> 
      </article> 
      </section> 
     </div> 
     <div class="mid-col"> 
      <section> 
      <h1> Main section title </h1> 
      <p>Some Text</p> 
      </section> 
     </div> 
     <aside role="complementary"> 
     <h1>Aside title</h1> 
     <p> Some text </p> 
     </aside> 
     <footer> 
      <h4>Copyright&copy <a href="#">blabla.com</a></h4> 
     </footer> 
    </body> 
    </html>

而这个CSS样式文件：

/* Global */ 

body{ 
    background: #E1F9A8; 
    font-family: "Arial"; 
    font-size: 16px; 
    width: 80%; 
    margin: auto; 
    overflow: hidden; 
    padding-bottom:60px; 
} 
ul{ 
    margin:0; 
    padding:0; 
} 

/* Header */ 
header{ 
    border: 1px solid; 
    border-radius: 10px; 
    background-color: #D0D8BE; 
    min-height: 75px; 
    padding-top:30px; 
    margin-top: 20px; 
} 
header nav{ 
    margin-top:10px; 
} 
header li{ 
    float: right; 
    padding: 0 10px 10px 0; 
    display: inline; 
} 
header a { 
    text-decoration: none; 
    text-transform: uppercase; 
    color: #226B90; 
    font-weight: bold; 
} 
header .branding{ 
    float: left; 
    margin: 0 0 35px 10px; 
    /* Some design */ 
    text-shadow: 1px 1px 2px orange; 
} 
header .branding h1{ 
    margin:0; 
} 
header .current, header a:hover{ 
    color: #C48B19; 
    text-shadow: 1px 1px 2px orange; 
} 

/* Left side */ 
.left-col { 
    width: 26%; 
    float: left; 
    border: 1px solid; 
    border-radius: 10px; 
    overflow: hidden; 
    margin-top: 10px; 
    background-color: #FAF8F3; 
    margin-right: 12px; 
} 
.left-col h1{ 
    padding-left: 10px; 
} 
.left-col p{ 
    padding-left: 10px; 
} 
.left-col i{ 
    padding-left: 10px; 
} 
.left-col .read-more{ 
    color: #C48B19; 
    text-shadow: 1px 1px 2px orange; 
    float: right; 
    text-decoration: none; 
} 

/* Right side */ 
aside{ 
    width: 25%; 
    float: left; 
    border: 1px solid; 
    border-radius: 10px; 
    overflow: hidden; 
    margin-top: 10px; 
    background-color: #FAF8F3; 
} 
aside h1{ 
    padding-left: 10px; 
} 
aside form{ 
    padding: 0 10px 10px 10px; 
} 

/* Main section */ 
.mid-col{ 
    width: 46%; 
    border: 1px solid; 
    border-radius: 10px; 
    overflow: hidden; 
    margin-top: 10px; 
    background-color: #FAF8F3; 
    float: left; 
    margin-right: 12px; 
} 

.mid-col h1, .mid-col h2, .mid-col img, .mid-col p{ 
    padding-left: 10px; 
} 
.mid-col img{ 
    width: 96%; 
} 

/* footer */ 
footer{ 
    border: 1px solid; 
    border-radius: 10px; 
    background-color: #D0D8BE; 
    padding:20px; 
    margin:20px 0 0 20px; 
}

当我看到输出，我得到这个重叠。我没有抓住如何解决它。我认为我的HTML5页面重构不好。

enter image description here

来源

2017-07-17 Houssem Bdr

+0

请加一小段代码片段 – Duannx

回答

1

定义一个名为clearfix的类，其中包含用于清除末尾的代码片段。你在哪里都已经漂浮的孩子的div，给这个父DIV

body{ 
 
    background: #E1F9A8; 
 
    font-family: "Arial"; 
 
    font-size: 16px; 
 
    width: 80%; 
 
    margin: auto; 
 
    overflow: hidden; 
 
    padding-bottom:60px; 
 
} 
 
ul{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
/* Header */ 
 
header{ 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    background-color: #D0D8BE; 
 
    min-height: 75px; 
 
    padding-top:30px; 
 
    margin-top: 20px; 
 
} 
 
header nav{ 
 
    margin-top:10px; 
 
} 
 
header li{ 
 
    float: right; 
 
    padding: 0 10px 10px 0; 
 
    display: inline; 
 
} 
 
header a { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: #226B90; 
 
    font-weight: bold; 
 
} 
 
header .branding{ 
 
    float: left; 
 
    margin: 0 0 35px 10px; 
 
    /* Some design */ 
 
    text-shadow: 1px 1px 2px orange; 
 
} 
 
header .branding h1{ 
 
    margin:0; 
 
} 
 
header .current, header a:hover{ 
 
    color: #C48B19; 
 
    text-shadow: 1px 1px 2px orange; 
 
} 
 

 
/* Left side */ 
 
.left-col { 
 
    width: 26%; 
 
    float: left; 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
    background-color: #FAF8F3; 
 
    margin-right: 12px; 
 
} 
 
.left-col h1{ 
 
    padding-left: 10px; 
 
} 
 
.left-col p{ 
 
    padding-left: 10px; 
 
} 
 
.left-col i{ 
 
    padding-left: 10px; 
 
} 
 
.left-col .read-more{ 
 
    color: #C48B19; 
 
    text-shadow: 1px 1px 2px orange; 
 
    float: right; 
 
    text-decoration: none; 
 
} 
 

 
/* Right side */ 
 
aside{ 
 
    width: 25%; 
 
    float: left; 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
    background-color: #FAF8F3; 
 
} 
 
aside h1{ 
 
    padding-left: 10px; 
 
} 
 
aside form{ 
 
    padding: 0 10px 10px 10px; 
 
} 
 

 
/* Main section */ 
 
.mid-col{ 
 
    width: 46%; 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
    background-color: #FAF8F3; 
 
    float: left; 
 
    margin-right: 12px; 
 
} 
 

 
.mid-col h1, .mid-col h2, .mid-col img, .mid-col p{ 
 
    padding-left: 10px; 
 
} 
 
.mid-col img{ 
 
    width: 96%; 
 
} 
 

 
/* footer */ 
 
footer{ 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    background-color: #D0D8BE; 
 
    padding:20px; 
 
    margin:20px 0 0 20px; 
 
} 
 

 
.clearfix:before, .clearfix:after { 
 
    display: table; 
 
    content: " "; 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="width = device-width"> 
 
    <meta name="description" content="Some training on web design"> 
 
    <meta name="keywords" content="web, design"> 
 
    <meta name="author" content="Houssem badri"> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <script src="js/script.js"></script> 
 
    <title>My Web design | Welcome</title> 
 
    </head> 
 
    <body> 
 
     <header> 
 
     <div class="branding"> 
 
      <h1>Some title</h1> 
 
     </div> 
 
     <nav> 
 
      <ul> 
 
     
 
     <li><a href="#">Contact us</a></li> 
 
      <li><a href="#">About us</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a class="current" href="#">Home</a></li> 
 
      </ul> 
 
     </nav> 
 
     </header> 
 
     <div class="clearfix"> 
 
     
 
     <div class="left-col"> 
 
      <section> 
 
      <article> 
 
       <h1>My first article</h1> 
 
       <p>Some Text</p> 
 
      </article> 
 
      <article> 
 
       <h1>My Second article</h1> 
 
       <p>Some Text</p> 
 
      </article> 
 
      </section> 
 
     </div> 
 
     <div class="mid-col"> 
 
      <section> 
 
      <h1> Main section title </h1> 
 
      <p>Some Text</p> 
 
      </section> 
 
     </div> 
 
     <aside role="complementary"> 
 
     <h1>Aside title</h1> 
 
     <p> Some text </p> 
 
     </aside> 
 
     
 
     </div> 
 
     <footer> 
 
      <h4>Copyright&copy <a href="#">blabla.com</a></h4> 
 
     </footer> 
 
    </body> 
 
    </html>

来源

2017-07-17 11:07:28

+1

时，我放弃了滚动，这会让你失去正确的滚动效果。只要给'溢出x：隐藏。 –

2

添加clear: both页脚的CSS（你需要，因为它上面的浮动元素的那个）

从 body标签

和擦除overflow: hidden。

body{ 
 
    background: #E1F9A8; 
 
    font-family: "Arial"; 
 
    font-size: 16px; 
 
    width: 80%; 
 
    margin: auto; 
 
    padding-bottom:60px; 
 
} 
 
ul{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
/* Header */ 
 
header{ 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    background-color: #D0D8BE; 
 
    min-height: 75px; 
 
    padding-top:30px; 
 
    margin-top: 20px; 
 
} 
 
header nav{ 
 
    margin-top:10px; 
 
} 
 
header li{ 
 
    float: right; 
 
    padding: 0 10px 10px 0; 
 
    display: inline; 
 
} 
 
header a { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: #226B90; 
 
    font-weight: bold; 
 
} 
 
header .branding{ 
 
    float: left; 
 
    margin: 0 0 35px 10px; 
 
    /* Some design */ 
 
    text-shadow: 1px 1px 2px orange; 
 
} 
 
header .branding h1{ 
 
    margin:0; 
 
} 
 
header .current, header a:hover{ 
 
    color: #C48B19; 
 
    text-shadow: 1px 1px 2px orange; 
 
} 
 

 
/* Left side */ 
 
.left-col { 
 
    width: 26%; 
 
    float: left; 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
    background-color: #FAF8F3; 
 
    margin-right: 12px; 
 
} 
 
.left-col h1{ 
 
    padding-left: 10px; 
 
} 
 
.left-col p{ 
 
    padding-left: 10px; 
 
} 
 
.left-col i{ 
 
    padding-left: 10px; 
 
} 
 
.left-col .read-more{ 
 
    color: #C48B19; 
 
    text-shadow: 1px 1px 2px orange; 
 
    float: right; 
 
    text-decoration: none; 
 
} 
 

 
/* Right side */ 
 
aside{ 
 
    width: 25%; 
 
    float: left; 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
    background-color: #FAF8F3; 
 
} 
 
aside h1{ 
 
    padding-left: 10px; 
 
} 
 
aside form{ 
 
    padding: 0 10px 10px 10px; 
 
} 
 

 
/* Main section */ 
 
.mid-col{ 
 
    width: 46%; 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
    background-color: #FAF8F3; 
 
    float: left; 
 
    margin-right: 12px; 
 
} 
 

 
.mid-col h1, .mid-col h2, .mid-col img, .mid-col p{ 
 
    padding-left: 10px; 
 
} 
 
.mid-col img{ 
 
    width: 96%; 
 
} 
 

 
/* footer */ 
 
footer{ 
 
    border: 1px solid; 
 
    border-radius: 10px; 
 
    background-color: #D0D8BE; 
 
    padding:20px; 
 
    margin:20px 0 0 20px; 
 
    clear: both; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="width = device-width"> 
 
    <meta name="description" content="Some training on web design"> 
 
    <meta name="keywords" content="web, design"> 
 
    <meta name="author" content="Houssem badri"> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <script src="js/script.js"></script> 
 
    <title>My Web design | Welcome</title> 
 
    </head> 
 
    <body> 
 
     <header> 
 
     <div class="branding"> 
 
      <h1>Some title</h1> 
 
     </div> 
 
     <nav> 
 
      <ul> 
 
     
 
     <li><a href="#">Contact us</a></li> 
 
      <li><a href="#">About us</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a class="current" href="#">Home</a></li> 
 
      </ul> 
 
     </nav> 
 
     </header> 
 
     
 
     <div class="left-col"> 
 
      <section> 
 
      <article> 
 
       <h1>My first article</h1> 
 
       <p>Some Text</p> 
 
      </article> 
 
      <article> 
 
       <h1>My Second article</h1> 
 
       <p>Some Text</p> 
 
      </article> 
 
      </section> 
 
     </div> 
 
     <div class="mid-col"> 
 
      <section> 
 
      <h1> Main section title </h1> 
 
      <p>Some Text</p> 
 
      </section> 
 
     </div> 
 
     <aside role="complementary"> 
 
     <h1>Aside title</h1> 
 
     <p> Some text </p> 
 
     </aside> 
 
     
 
     <footer> 
 
      <h4>Copyright&copy <a href="#">blabla.com</a></h4> 
 
     </footer> 
 
    </body> 
 
    </html>

来源

2017-07-17 10:56:46 Johannes

+0

很好的回答，但我失去了右边 –

+1

擦除'溢出滚动：hidden'来自'body'标签。它可以防止滚动，如果你没有一个“全部包装”的元素，它就没有意义。 – Johannes

1

我已经试过你的代码，一切是正确的，你做了什么，但你需要在页脚CSS部分添加了一小段代码 检查下面的CSS页脚代码

<!-- css --> 
<style> 
    footer 
    { 
    border: 1px solid; 
    border-radius: 10px; 
    background-color: #D0D8BE; 
    padding: 20px; 
    margin: 15px 0 0 0px; 
    clear: both; 
    } 
</style>

来源

2017-07-17 11:07:13

+0

与第一个答案相同。当我给身体添加'清除' –

相关问题

 相关问题