【问题标题】:Div filling entire width of screendiv填充整个屏幕宽度
【发布时间】:2012-07-29 18:39:44
【问题描述】:

我一直在尝试向我的网站添加标题,但我无法让容器适合屏幕的整个宽度,尽管宽度设置为 100%auto。它总是在左右两边都有大约 5px 的边距,即使边距和内边距都设置为 0。

HTML:

<div id="header">
    <h7>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
    </h7>
</div>

CSS:

body div#header{
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #c0c0c0;
}

【问题讨论】:

  • 供参考,&lt;h7&gt; 不是有效的 HTML 标记
  • 100% DIV width is not really 100% 的可能重复项(欢迎来到 Stack Overflow……请务必在询问之前进行搜索!)
  • 你找到答案了吗,用我的试试??

标签: html css


【解决方案1】:

添加

body, html{
  margin:0;
  padding:0;
}

到您的 CSS。

浏览器在呈现网站时会放置默认边距和/或填充。这样就可以避免这种情况。

【讨论】:

  • @Sidetracking 查看cssreset.com 了解一些通用的 CSS 重置样式表。使用重置 css 将使您的网站在大多数浏览器中的外观均等化!
  • 是的,同意。从长远来看,使用 css 重置文件绝对是一个好主意。
  • 感谢所有回复,我现在知道了。感谢您的指点,对新手有很大帮助!
  • 如果它有助于解决您的问题,请务必接受此答案:)
【解决方案2】:
body, html {
    margin: 0;
    padding: 0;
}

div { width: 100%;
    margin: 0;
    padding: 0;
    background-color: #c0c0c0;
}

html, body, div {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
}

【讨论】:

    【解决方案3】:

    这是因为它被它的父级填充。您是否将其包含在另一个 div 中?或者,也许您在文档正文上设置了填充/边距属性?请提供您的完整 CSS。如果你不这样做,那是因为浏览器正在为你添加它,所以明确地设置它使用:

    body {
        margin: 0;
        padding: 0;
    }
    

    【讨论】:

      【解决方案4】:

      在 CSS 中的 body/html 标签上设置零边距。看看有没有帮助。

      【讨论】:

        【解决方案5】:

        您需要添加一个重置,例如:

        html, body, div {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
        }
        

        所有浏览器都有一个默认样式表。您需要通过重置来覆盖它。

        【讨论】:

          【解决方案6】:

          试试这个,希望对你有帮助:

          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="utf-8">
                  <title>Header & Footer</title>
                  <style type="text/css">
                      /* Global */
                      * {
                          margin: 0;
                      }
                      html, body {
                          height: 99%;
                      }
                      /* Header */
                      .container{
                          min-height: 100%;
                          height: auto !important;
                          height: 100%;
                          margin: 0 auto -4em;
                          width:100%;
                          font-family:Segoe UI;
                          color:#fff;
                      }
                      .container-header{
                          padding-top:5px;
                          padding-left:20px;
                      }
          
                      /* Footer */
                      .footer{
                          background-color:#333030;
                          width:100%;
                          font-family:Segoe UI;
                          color:#fff;
                      }
                      .footer img{
                          padding-left:15px;
                      }
                      /* Page Content */
                      .content{
                          height: auto !important;
                      }
                      .container p{
                      font-size:12pt;
                      font-weight:bold;
                      }
                  </style>
              </head>
              <body>
                  <!-- Header Div -->
                  <div class="container">
                      <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
                          <tr></tr>
                          <tr>
                              <td></td>
                              <td>
                                  <div style="padding-left:100px;font-size:36px;">Header</div>
                              </td>
                          </tr>
                          <tr></tr>
                      </table>
          
                      <!-- Page Content Div -->
                      <div class="content">
                          Blah Blah
                      </div>
                  </div>
          
                  <!-- Footer Div -->
                  <div class="footer">
                      <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
                          <tr></tr>
                          <tr>
                              <td></td>
                              <td>
                                  <div style="padding-left:100px;font-size:36px;">Footer</div>
                              </td>
                          </tr>
                          <tr></tr>
                      </table>
                  </div>
              </body>
          </html>
          

          【讨论】:

            【解决方案7】:

            试试下面的代码:

            <!DOCTYPE html>
                <html>
                <head>    
                    <style>
                        body, html{
                               margin:0;
                        } 
                    </style>
            
                </head>
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2022-12-14
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2015-06-16
              • 1970-01-01
              相关资源
              最近更新 更多