使用HTML5和CSS3（响应）全宽分区

StackOverflow https://stackoverflow.com//questions/25076798

  •  02-01-2020
  •  | 
  •  

题

我对stackoverflow相对较新，并且在制作网页时遇到一些困难

所以我所需要的是一个页面网站分为不同的部分，它们是全宽Div（即100％宽度的宽度），并且是连续的不同背景颜色。

我面对的问题是，Divs没有占据屏幕的全宽，不仅在两侧都有白色空间，而且在2个div之间 此外，当窗口大小减小时，div之间的间隙增加

所需的结果如下所示：

http://classrebels.com/
http://startbootstrap.com/templates/freelancer/

我使用的代码如下：

i）html：

    <html>
    <body>
    <div class="full" id="one">
    <h1>Just something</h1>
    </div>
    <div class="full" id="two">
    <h1>Just something</h1>
    </div>
    </body>
    </html>
.

ii）CSS：

    .full{
    width= 100%;
     }
    #one{
     background-color: #fff;
    }  
    #two{
     background-color: #f13;
    }
.

请告诉我我在哪里出错的地方

有帮助吗？

解决方案

演示

html 

<div class="full" id="one">
     <h1>Just something</h1>
</div>
<div class="full" id="two">
     <h1>Just something</h1>
</div>
.

css 

body, html {
    width: 100%;
    height: 100%;
    margin:0; /* default margin set to 0 */
    padding:0; /* default padding set to 0 */
}
.full {
    width: 100%;
}
#one {
    background-color: gray;
    height: 50%; /* whatever you want to give height */
}
#two {
    background-color: #f13;
    height: 50%; /* whatever you want to give height */
}
.full h1 {
    margin:0; /* default margin of h1 tag set to 0 */
    padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}
.

其他提示

演示小提琴

要删除视口上的默认保证金/填充（为您提供空格），您需要添加以下CSS：

html, body{
  width:100%; /* <-- also a good idea to add */
  margin:0;
  padding:0;
}
.

和更改：

.full{
  width= 100%;
}
.

到：

.full{
  width:100%;
}
.

CSS样式属性/值对用冒号:分离，而不是等于的世代odicetagcode

您是否尝试过全身和身体标签中的设置边距和填充0 像

 .full
{
    width :100%;
   margin:0px;
   padding:0px;
     }
.

同样，您的标题也需要一些余量，因此根据需要设置标题的余量。 为了更好，请参阅此链接 w3schools

您必须更改正文和H1边距，因为它们在浏览器中具有默认值。 我在这个小提琴中为你修了它：

h1{
  margin: 0px;
}
body{
  border: 0px;
  padding: 0px;
  margin: 0px;
}
.

http://jsfiddle.net/pwlgb/

问题是你不给整个div一个背景颜色，但只有文本。

如果您广告边框，您可以看到DIV的真实尺寸，它将填充整个DIV。

检查我为此而制作的小提琴 

 border: 1px solid black;
.

http://jsfiddle.net/2h4kq/

您可以将边框设置为0px，以便未显示，它将为您提供正确的结果

Demo是您链接到的不使用全宽div。他们实际上使用了一个完整的宽度生成播放器元素，该码元素具有背景颜色。

然后，它们具有内部行生成播放代码，然后具有容器和列世代划分器。所以在Freelancer示例中它看起来像这样：

<section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>About</h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
                </div>
                <div class="col-lg-4">
                    <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
                </div>
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <a href="#" class="btn btn-lg btn-outline">
                        <i class="fa fa-download"></i> Download Theme
                    </a>
                </div>
            </div>
        </div>
    </section>
.

CSS的样本：

section.success {
color: #fff;
background: #18bc9c;
}

.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.

下载该模板，它使用 bootstrap ，并播放它以获得您想要的外观。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top