Question

我有以下页面，我试图让div跨越整个页面。

我使用width:100%;但它并没有跨越整个宽度。我试图根据stackoverflow上已经提供的答案来做到这一点：

我有以下CSS：

#experience-container {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    width:100%;
    margin-top: 45px;
    position: fixed;
    z-index: 1;
    background-color: rgba(248,248,248,.8);
    text-align: center;
    font-size: 13px;
}

#experience-container > div {
    width: 12%;
    /*height: 125px;*/
    vertical-align: middle;
    display: inline-block;
    margin-top:20px;
    /*display: inline;
    zoom: 1*/
}
#experience-container:after {
    content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

无论屏幕宽度如何，如何让包含的内容跨越整个页面？

Answer 1

我发现你的导航父母中有这两个类（从你的html中删除）：

.x-container.max {
    max-width: 1200px;
}
.x-container.width {
    width: 88%;
}

class="x-container max width"删除max width仅使用class="x-container"

<div class="x-container max width" style="margin: 0px auto;padding: 0px;">
  <div class="x-column x-sm x-1-1" style="padding: 0px;">
    <div class="x-raw-content">
      <div id="experience-container">
        <div>SAP Implementations</div>
        <div>SAP HANA</div>
        <div>Mergers and Acquistions</div>
        <div>Change Management</div>
        <div>Supply Chain</div>
        <div>Program Quality Assurance</div>
        <div>Program Definition</div>
        <div>LIMS</div>
      </div>
    </div>
  </div>
</div>

Answer 2

div with＃experience-container确实跨越了100％的视口。尝试添加css reset或margin：0;在身体元素。

Answer 3

我将.x-container的格式从margin: 0px auto更改为margin: 0;

原始

<div class="x-container max width" style="margin: 0px auto;padding: 0px;"><div class="x-column x-sm x-1-1" style="padding: 0px;"><div class="x-raw-content"><div id="experience-container">

更新

<div class="x-container max width" style="margin: 0;padding: 0px;"><div class="x-column x-sm x-1-1" style="padding: 0px;"><div class="x-raw-content"><div id="experience-container">

通过这种改变，您将获得我相信您正在寻找的效果。

提示＃1：没有必要对零值设置一个度量单位，这是一个不常见的标准。前 - margin: 0px 0px只是margin: 0。

提示＃2：此外，margin: 0 0的简写符号为margin: 0。这是大多数开发人员使用的常用语法。

UPDATE 如前所述，你有

.x-container.width { width: 88%; }

通过我的更改，您无需更改，但我建议您进行代码清理。像width: 88%这样的事情对我来说似乎不对。

基于屏幕宽度的页面上div的自动宽度

3 个答案: