css 高度100%不起作用,div的高度保持与内容相适应

fjaof16o  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(176)

我已经检查了网络中的所有资源,但无法修复高度:100%不工作在我的div。我试过设置html和body的高度(也是min-height),以及所有其他已知的解决方案。

<section id="home_Page">
        <div id="homeSection">
            <p class="testoHome osservato fadeInH">Esame di Stato 2022/2023</p>
            <p class="testoHome osservato fadeInH">Ciotola Emanuele</p>
            <p class="citazioneHomePage osservato fadeInW">"Il tempo"</p>
        </div>
        <div id="fotoRicordi">
            <img src="..." width="100%" oncontextmenu="return false;" draggable="false">
        </div>
</section>

#homeSection {
    background-image: url(Assets/images/GraffitoViaDellaPace.svg);
    background-position: bottom right;
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-top: calc(45px + 1vw);
}

我希望我的主页是100%高。我尝试了100vh的高度,但这并不适合我,因为vh并不计算,例如,在移动上的 chrome 条的高度。部分X具有可变的高度,因为插入其中的照片适应于屏幕的尺寸。

q3qa4bjr

q3qa4bjr1#

以下是我的解决方案:)如果有什么我误解了,让我知道,我会编辑它。我把你的html保持不变,这是我添加的css:

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #home_Page {
    position: absolute;
    width: 100%; // not sure if you want it full width, feel free to remove this line
    height: 100vh;
    margin: 0;
    padding: 0;
  }

我认为位置属性会对你有很大帮助。

相关问题