Html 填充整个屏幕宽度的Div_Html_Css

Html 填充整个屏幕宽度的Div

html css

Html 填充整个屏幕宽度的Div,html,css,Html,Css,我一直在尝试向我的网站添加标题，但我无法使容器适应屏幕的全宽，尽管宽度设置为100%或auto。它的左右两边都有大约5px的边距，即使边距和填充都设置为0 HTML: 加到你的CSS 浏览器在呈现网站时会放置默认边距和/或填充。这样可以避免这种情况。在CSS中的body/html标记上留一个零边距。查看是否有帮助。您需要添加重置，例如： html, body, div { margin:0; padding:0; border:0; outline:0; font-size:100%; ver

我一直在尝试向我的网站添加标题，但我无法使容器适应屏幕的全宽，尽管宽度设置为

100%

或

auto

。它的左右两边都有大约5px的边距，即使边距和填充都设置为0

HTML:

加

到你的CSS

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

在CSS中的body/html标记上留一个零边距。查看是否有帮助。

您需要添加重置，例如：

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

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

这是因为它被其父项填充。你把它放在另一个分区了吗？或者在文档的正文上设置了padding/margin属性？请提供完整的CSS。如果您不这样做，是因为浏览器正在为您添加它，所以请使用以下方法明确设置：

body {
    margin: 0;
    padding: 0;
}

body，html{
保证金：0；
填充：0；
}
分割宽度：100%；
保证金：0；
填充：0；
背景色：#C0；
}

或

试试这个，我希望这有助于：

<!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>


页眉和页脚
/*全球的*/
* {
保证金：0；
}
html，正文{
身高：99%；
}
/*标题*/
.集装箱{
最小高度：100%；
高度：自动！重要；
身高：100%；
保证金：0自动-4em；
宽度：100%；
字体系列：SegoeUI；
颜色：#fff；
}
.货柜头{
垫面：5px；
左侧填充：20px；
}
/*页脚*/
.页脚{
背景色：#333030；
宽度：100%；
字体系列：SegoeUI；
颜色：#fff；
}
.footer img{
左侧填充：15px；
}
/*页面内容*/
.内容{
高度：自动！重要；
}
.货柜{
字号：12号；
字体大小：粗体；
}
标题
废话
页脚

尝试以下代码：

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

    </head>


正文，html{
保证金：0；
}

作为参考，

不是一个有效的HTML标记可能重复（欢迎使用Stack Overflow…在询问之前一定要搜索！）您是否找到了它的答案，用我的进行了尝试？？？@Sidetracking查看一些常规CSS重置样式表。使用重置css将在大多数浏览器中均衡站点的外观！是的，我同意。从长远来看，使用css重置文件绝对是一个好主意。感谢所有回复，我现在就得到了它。谢谢你的指点，对新手帮助很大！如果有助于解决您的问题，请务必接受此答案：）

body {
    margin: 0;
    padding: 0;
}

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

<!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>

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

    </head>