Question

我在目标网页中使用了materializecss。我将页面设置在一个容器中（使用html {background-color: yellow}，但是我想在第二个div中使用我的背景颜色来扩展窗口的整个宽度。我怎样才能超出界面的范围。容器＆＃34;

这是jsfiddle

现在它看起来像这样：

但我希望它看起来像这样：

这是我的HTML

<div class="theme-landingpage-main">
  <div class="container">
    <div class="row">
      <div class="col m12 l12 s12 layout-header">
        <p class="headertitle">MELLOW<br /> MOMENT</p>
      </div>
    </div>
    <div class="row layout-hero">
      <div class="col s12 m6 l6 module-hero-picture-badge">
        <img id="badge" src="app/assets/img/login/badge.png" alt="">
        <img id="boxhero" src="app/assets/img/login/boxhero.png" alt="">
      </div>
      <div class="col s12 m6 l6 module-hero-text">
        <img id="text-chill-banner" src="app/assets/img/login/banner.png" alt="">
        <img id="talking-to-you" src="app/assets/img/login/text-talking-to-you.png" alt="">
        <p>Take your life back. Breathe. Take stock of yourself. You need a break. Take one.<br>
          Focus your mind. Relax your body.<br>
          <p style="font-family: 'Raleway', sans-serif !important; font-weight: 400 !important; font-style: italic;">(and Take a Toke).</p>
        </p>
        <img id="text-retake-moment" src="app/assets/img/login/moment-text.png" alt="">
        <img class="shop-button" src="app/assets/img/login/shopbut.png" alt="">
      </div>
    </div>
  </div>
</div>

这里是CSS

.theme-landingpage-main {
  background-color: #FFD000;

  //layouts and modules for landing page '/login'
  .layout-header {
    width: 100%;
    height: 130px;
    background-color: #FFD000;
    .headertitle {
      font-size: 40px !important;
      position: relative;
      font-family: 'Lobster Two', sans-serif !important;
      font-weight: 400;
      bottom: 25px;
    }
  }

  .layout-hero { <---------------- this is the div in question
    background-color: #F2F2F2; 
    .module-hero-picture-badge {
      #badge {
        position: relative;
        width: 65%;
        z-index: 2;
      }
      #boxhero {
        width: 75%;
        position: relative;
        left: 17%;
        bottom: 100px;
        z-index: 1;
      }
    }
    .module-hero-text{
      p {
        position: relative;
        top: 20px;
        right: 23px;
        font-size: 20px !important;
        text-align: center;
      }
      #text-chill-banner {
        width: 128%;
        position: relative;
        right: 20%;
        top: 50px;
        z-index: 3;
      }
      #talking-to-you {
        width: 480px;
        position: relative;
        top: 41px;
        right: 45px;
      }
      #text-retake-moment {
        width: 500px;
        position: relative;
        right: 12%;
      }
    }
  }
}

Answer 1

你需要做的是关闭最初的#main { background-color:blue; height: 10vh; } #body { background-color:grey; height:80vh; } #foot { background-color:blue; height: 10vh; }（持有徽标）打开一个带有自定义类的新div，使你可以设置它（给它白色背景），打开一个新的{{1}并拥有你的英雄内容。完成后，再次关闭<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html > <head> <title>Test</title> </head> <body> <div id="main"> <div id="head"> <div id="head_content"> HEARDER </div> </div> <div id="body"> <div id="menu"> MENU </div> <div id="page"> PAGE CONTENT </div> </div> <div id="foot"> <div id="foot_content"> FOOTER </div> </div> </div> </body> </html>，关闭.container，重新打开.container并继续翻页。

.container

.white-bg

旁注：我注意到您嵌套了.container个标签。该无效.white-bg { background-color: white; }会导致渲染问题。大多数浏览器会在打开新标记之前关闭初始<div class="theme-landingpage-main"> <div class="container"> <div class="row"> <div class="col m12 l12 s12 layout-header"> <p class="headertitle">MELLOW<br /> MOMENT</p> </div> </div> </div>  <div class="white-bg">  <div class="container">  <div class="row layout-hero"> <div class="col s12 m6 l6 module-hero-picture-badge"> <img id="badge" src="app/assets/img/login/badge.png" alt=""> <img id="boxhero" src="app/assets/img/login/boxhero.png" alt=""> </div> <div class="col s12 m6 l6 module-hero-text"> <img id="text-chill-banner" src="app/assets/img/login/banner.png" alt=""> <img id="talking-to-you" src="app/assets/img/login/text-talking-to-you.png" alt=""> <p>Take your life back. Breathe. Take stock of yourself. You need a break. Take one.<br> Focus your mind. Relax your body.<br></p> <p style="font-family: 'Raleway', sans-serif !important; font-weight: 400 !important; font-style: italic;">(and Take a Toke).</p> <img id="text-retake-moment" src="app/assets/img/login/moment-text.png" alt=""> <img class="shop-button" src="app/assets/img/login/shopbut.png" alt=""> </div> </div> </div>  </div>  <div class="container"> Some other content, in container... </div> </div>标记，留下结尾<p>孤儿。有时这并没有任何明显的效果，但它有可能破坏页面或导致难以跟踪/修复的错误。

Answer 2

您可以通过将容器用于单独的div

来实现

<强> HTML

<div class="theme-landingpage-main">
  <div class="container">
    <div class="row">
      <div class="col m12 l12 s12 layout-header">
         <p class="headertitle">MELLOW<br /> MOMENT</p>
      </div>
    </div>
   </div>
  </div>
<div class="theme-landingpage-main white">
   <div class="container">
     <div class="row">
       <div class="row layout-hero">
         <div class="col s12 m12 l12 module-hero-picture-badge">
       </div>
       <div class="col s12 m12 l12 module-hero-text">
        <p>Take your life back. Breathe. Take stock of yourself. Take one.<br>
      Focus your mind. Relax your body.<br>
        </p>
     </div>
    </div>
   </div>
</div>

<强> CSS

添加此类background-color: #fff类

的课程白色或div

.white {
  background-color: #fff;
}

Demo

Answer 3

根据Grid在Materialise文档中解释。 “它允许您将页面内容居中。容器类设置为窗口宽度的~70％。它可以帮助您居中和包含页面内容。我们使用容器来包含我们的正文内容。”

您需要将.container类与页面分开。如果您想要全宽，只需从.container中排除该区域。

示例：

<div class="yellowBkg">
   <header class="container">
      Header Content
   </header>
   <div class="fullWidthGrayBkg">
      <div class="container">
        Because you need content within container.
      </div>
   <div>
   <div class="container">
       Further Content.
   </div>
</div>

使用解决方案修改您的小提琴：https://jsfiddle.net/avtarnanrey/ugr9qjp7/1/

当使用容器时，Masterializecss使窗口的背景颜色为100％

3 个答案: