Question

我有一个蓝色条，沿着我的页面顶部延伸，填满了屏幕的整个宽度，但是，我不能让它坚持最大宽度。

在移动设备上，它会在右侧呈现大量的额外间距。

有什么想法吗？

您可以在此处查看代码和CSS： http://jsfiddle.net/DavidMichaelangelo/4vj0gfp1/1/

HTML

<body>
                <div id="main-logo" class="clearfix">
                <div style="height: 26px; width: 174px; background-color: #000; color: #FFF;">Placeholder</div>
            </div>
            <div class="blue-line-headline clearfix">
                <div class="blue-line-content clearfix">
                    <span style="font-size:1.25em;">Open an Account and</span><br />
                    <span style="font-size:3em; font-weight: bold;">Save XX% for X months*</span>
                </div>
            </div>
</body>

CSS

.blue-line-headline {box-shadow: 0 1px 3px rgba(0,0,0,.3); z-index: 15; color: #fff; width:100%; background-color:#1C3F94; padding: 0.5em 400%; margin: 0 -400%; max-width: 1100px;  display: block;}
.blue-line-content {padding: 0px 0px 0px 20px; margin: auto; width: 100%; position: relative; display: block;}
#main-logo {padding: 20px 0px 20px 20px;}

Answer 1

修复此问题

.blue-line-headline {box-shadow: 0 1px 3px rgba(0,0,0,.3); z-index: 15; color: #fff; width:100%; background-color:#1C3F94; padding: 0.5em 400%; margin: 0 -400%; max-width: 1100px;  display: block;}

到

.blue-line-headline {box-shadow: 0 1px 3px rgba(0,0,0,.3);color: #fff; width:100%; background-color:#1C3F94;max-width: 1100px;}

此外，将box-sizing: border-box;添加到蓝线内容将从填充中删除额外的宽度。

Answer 2

我在这里更新了你的jsfiddle http://jsfiddle.net/4vj0gfp1/7/。在CSS3中，您可以使用vw作为单位。它代表视觉宽度。

body{
    padding: 0;
    margin: 0;
}
.blue-line-headline {
    box-shadow: 0 1px 3px rgba(0,0,0,.3); 
    z-index: 15; 
    color: #fff; 
    width:100vw; 
    background-color:#1C3F94;
    padding: 0.5em 0; 
    margin: 0;
    max-width: 1100px;  
    display: block;}
.blue-line-content {
    padding: 0px 0px 0px 20px;
}
#main-logo {padding: 20px 0px 20px 20px;}

Answer 3

兄弟试试这个并看看。

如果您想确定其手机，标签或电脑是否使用此代码。

   /* Smartphones (portrait and landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) -----------
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- *
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pi
only screen and (min-device-pixel-ratio
/* Styles */
}

Url of code

手机上的最大宽度（全宽div）

3 个答案: