div填充整个屏幕宽度答案

【问题标题】：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;
}

【问题讨论】：

供参考，<h7> 不是有效的 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>

【讨论】：