css 高度溢出无法正常工作,内容显示在网站中间

tvz2xvvm  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(150)

我把高度设置为520px,但是我希望网站能够快速响应,并且高度是动态的。问题是每当我尝试添加min-height:100px; overflow:auto;时,内容开始显示在页面中间,隐藏在上面的一个div后面。我也尝试了height:fit-content,但它也不起作用。有什么想法吗?
下面是代码:

<div class="content">
                            <div class="leftimg">
                                <img src="../img/img.png">
                            </div>
                            <div class="righttext">
                            <div>
                            <span class="topic">text</span>
                            </div><br>
                            <span class="desc">
text
                            </span>
                            </div>
                </div>
            </div>
.righttext{
  display:block;
  width: 50%;
  padding: 1em;
  float: right;
  font-family: teko;
  text-align: center;
  border-left:2px dashed #ffffff;
  height: 90%;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  
}

.leftimg{
  display:block;
  width: 43%;
  padding: 1em;
  border: 1px solid red;
  float:left;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  align-items: center;
}

.desc{
  font-size: 1.5em;
}

.topic{
  font-size: 3em;
}

.content{
  position: relative;
    display: block;
  background-color: #76C9F0; 
  height:520px;
  border-radius: 0px 0px 20px 20px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
 .content{
  width: 100%;
  border-radius: 0px 0px 0px 0px;
  overflow: auto;
}
 .leftimg{
  display:none !important;
}

.righttext{
  width: 90% !important;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 2px dashed white;
  border-left: none !important;
}
 }

对于当前的问题,最简单的解决方案是什么?enter image description here

mefy6pfw

mefy6pfw1#

因此,您可以尝试一下,看看这是否解决了问题。因此,我注解掉了transform属性,并在. content文件中添加了overflow: auto

.righttext {
  display: block;
  width: 50%;
  padding: 1em;
  float: right;
  font-family: teko;
  text-align: center;
  border-left: 2px dashed #ffffff;
  position: relative;
  top: 50%;
  /* -ms-transform: translateY(-50%); */
  /* transform: translateY(-50%); */
}

.leftimg {
  display: block;
  width: 43%;
  padding: 1em;
  border: 1px solid red;
  float: left;
  position: relative;
  top: 50%;
  /* -ms-transform: translateY(-50%); */
  /* transform: translateY(-50%); */
  align-items: center;
}

.desc {
  font-size: 1.5em;
}

.topic {
  font-size: 3em;
}

.content {
  position: relative;
  display: block;
  background-color: #76c9f0;
  /* height: 520px; */
  overflow: auto;
  border-radius: 0px 0px 20px 20px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  .content {
    width: 100%;
    border-radius: 0px 0px 0px 0px;
    overflow: auto;
  }
  .leftimg {
    display: none !important;
  }
  .righttext {
    width: 90% !important;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px dashed white;
    border-left: none !important;
  }
}
<div class="content">
  <div class="leftimg">
    <img src="../img/img.png" />
  </div>
  <div class="righttext">
    <div>
      <span class="topic">text</span>
    </div>
    <br />
    <span class="desc">
        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. 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.
      </span>
  </div>
</div>

相关问题