如何在不影响CSS网格中其他元素的情况下使一行拉伸到整个屏幕尺寸

时间:2018-12-03 04:09:57

标签: css css3 css-grid

“我正在学习CSS网格!我想增加页脚的宽度,并使页脚(紫色)填充屏幕的总宽度!有人可以告诉我如何实现它!谢谢” !

html,body
{
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 100%;
    color: white;}


#container
{display: grid;
grid-template-row: 9.6fr 2.4fr;
grid-template-columns:8.4fr 3.6fr;  }


main
{
background-color: black;
}

submain
{
  background-color: blue;
}

footer
{
  background-color:purple;
}
  <div id="container">
<main>
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</main>

<submain>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</submain>

<footer
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</footer>



    </div>

1 个答案:

答案 0 :(得分:0)

您需要添加值为grid-column的{​​{1}}属性:

1 / -1

这是footer { background-color:purple; grid-column: 1 / -1; } 的快捷方式。 grid-column-start / grid-column-end是第一列,1是最后一列(从末尾开始的第一列)。

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

编辑:我刚刚读到您希望它“不影响其他”地填充屏幕的整个宽度,如果您的网格不是100%宽度,则其中的元素不能是100%宽度(如果这就是您的意思)真正想要的(嗯,虽然可以,但是溢出了网格并做了奇怪的意外事情)