Question

我想知道是否有人知道如何在我的网站中删除背景颜色区域：

Image of what site looks like

我曾尝试将其包装在不同类型的div和标签中，但是绝对定位使我无法将标头div置于此下方的两个flex div上。

以下代码：

body {
  /*background-image: url(4.png);*/
  background-color: #3c5567;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header {
  padding: 30px;
  margin: 0 auto;
  /*text-align: center;*/
  background-color: #333333;
  color: white;
  font-size: 15px;
  flex: 1;
  width: 100%;
  align-self: stretch;
}

.mainpage {
  display: flex;
  flex-direction: column;
}

.feed {
  flex: 1;
  flex-grow: 0;
  padding: 20px;
}

.blog {
  flex: 1;
  flex-grow: 1;
  padding: 20px;
  background-color: white;
}

<body class="body">
  <div class="mainpage">
    <div class="header">
      <h1 style="color: white"> Testing </h1>
      <p style="color: lightgrey"> Hello, this is a test of some words!</p>
    </div>
  </div>

  <div class="content">
    <div class="blog">
      <p>
        Test of where my blog posts will be; classic 2 column design

      </p>
    </div>

    <div class="feed">
      <p style="color: white">
        Used for the twitter feed/quick links
        <br>
      </p>
    </div>
  </div>

</body>

理想情况下，我希望页眉框（图像中的深灰色框）占据整个屏幕宽度，并删除屏幕周围的蓝色边框；即页面的顶部完全是深灰色，而在此部分的下方仅开始看到蓝色。

我不知道还有什么可尝试的。我可以得到一些关于我做错什么的建议吗？

Answer 1

根据我的研究，您可以轻松地在margin : 0px; CSS属性中添加body。

参考代码。

body {
  /*background-image: url(4.png);*/
  background-color: #3c5567;
  margin : 0px; /*this is where you edit the margin*/
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header {
  padding: 30px;
  margin: 0 auto;
  /*text-align: center;*/
  background-color: #333333;
  color: white;
  font-size: 15px;
  flex: 1;
  width: 100%;
  align-self: stretch;
}

.mainpage {
  display: flex;
  flex-direction: column;
}

.feed {
  flex: 1;
  flex-grow: 0;
  padding: 20px;
}

.blog {
  flex: 1;
  flex-grow: 1;
  padding: 20px;
  background-color: white;
}

<body class="body">
  <div class="mainpage">
    <div class="header">
      <h1 style="color: white"> Testing </h1>
      <p style="color: lightgrey"> Hello, this is a test of some words!</p>
    </div>
  </div>

  <div class="content">
    <div class="blog">
      <p>
        Test of where my blog posts will be; classic 2 column design

      </p>
    </div>

    <div class="feed">
      <p style="color: white">
        Used for the twitter feed/quick links
        <br>
      </p>
    </div>
  </div>

</body>

希望它回答您的问题。

如果只希望顶部和右侧不存在，则可以指定每个边距，

示例

margin : (top)px (right)px (bottom)px (left)px;

访问 here 了解有关保证金的更多信息。

如何使该Flex Box成为整个屏幕的整个宽度？

1 个答案: