css 如何使div全宽屏幕

am46iovg 于 2023-04-13 发布在其他

关注(0)|答案(3)|浏览(130)

我想使div的宽度和屏幕的高度的100%，它也可能响应-
输出如下-x1c 0d1x

* {
  top: 0%;
  position: relative;
  font-family: 'Imprima', sans-serif;
}

.container {
  background-color: #D5C5C6;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  gap: 120px;
}

<div class="container">

  <div class="nev" id="nevbar"></div>

  <div class="hero">
    <div class="heading">Beauty Brands</div>
    <div class="description">Treat your makeup like jewelry for the face. Play with colors, shapes, structure It can transform you.</div>
    <div class="ctc-btn"><a href="">Get Offer</a></div>
  </div>

  <!-- <div id="brand">Brands</div> -->

  <div class="footer">www.logo.com</div>

</div>

css

来源：https://stackoverflow.com/questions/76001971/how-to-make-div-full-width-of-screen

3条答案

按热度按时间

plicqrtu1#

height: 100%表示父元素高度的100%。
块级元素的默认高度是fit-content。fit-content意味着高度是undefined，但将根据元素的内容进行计算。
如果我们将这两条信息结合在一起，你会发现100%的undefined仍然是undefined。因此100%只适用于特定定义的高度。
实际上你要使用的是vw（视图宽度）和vh（视图高度），它们是相对于viewport大小的单位，viewport是web浏览器的可视区域（不是屏幕大小）。
但是，要正常工作，您需要添加一些内容以防止溢出问题。
1.您需要重置默认的正文边距，否则会溢出2 x 8px：body { margin: 0; }。
1.适合整个屏幕的元素必须将框模型设置为border-box，否则填充或边框也会溢出屏幕，因为这些通常是在元素的宽度和高度之上计算的。
1.您需要对该元素使用min-height或溢出规则，否则较大的内容将溢出该元素并与其他内容冲突。

* {
  font-family: 'Imprima', sans-serif;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  background-color: #D5C5C6;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  gap: 120px;
  min-height: 100vh;
  padding: 0.5em;
}

<div class="container">

  <div class="nev" id="nevbar"></div>

  <div class="hero">
    <div class="heading">Beauty Brands</div>
    <div class="description">Treat your makeup like jewelry for the face. Play with colors, shapes, structure It can transform you.</div>
    <div class="ctc-btn"><a href="">Get Offer</a></div>
  </div>

  <!-- <div id="brand">Brands</div> -->

  <div class="footer">www.logo.com</div>

</div>

赞(0）回复(0）举报 2023-04-13

piwo6bdm2#

尝试使用vw和vh css单位来响应屏幕的大小，它们的工作原理类似于百分比单位。
vw是根据屏幕尺寸的宽度。指定10vw是占用总可视屏幕宽度的10%。
vh是根据屏幕尺寸的高度。指定10vh是占用总可视屏幕高度的10%。
https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/

赞(0）回复(0）举报 2023-04-13

wvt8vs2t3#

请试试这个：

body{
    margin:0;
    padding:0;
    font-family: 'Imprima', sans-serif;
}

.container {
    background-color: #D5C5C6;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    gap: 120px;
}

<!DOCTYPE html>
  <head>
  </head>
  <body>
      <div class="container">

        <div class="nev" id="nevbar"></div>

        <div class="hero">
            <div class="heading">Beauty Brands</div>
            <div class="description">Treat your makeup like jewelry for the face. Play with colors, shapes, structure It can transform you.</div>
            <div class="ctc-btn"><a href="">Get Offer</a></div>
        </div>

        <!-- <div id="brand">Brands</div> -->

        <div class="footer">www.logo.com</div>

        </div>
  </body>
</html>

赞(0）回复(0）举报 2023-04-13

我来回答

css 如何使div全宽屏幕

3条答案

相关问题

热门标签

最新问答