个人中心
gpt4 book ai didi

html - 包装容器中彼此相邻的 Div CSS 高度问题

转载 作者：太空宇宙 更新时间：2023-11-04 05:55:52 25 4
gpt4 key购买 nike

我正在构建一个简单的 HTML 和 CSS 页面，我在其中创建了一个容器，其中包含两个相邻的其他 div，但我遇到的问题是屏幕截图中显示的那个:

enter image description here

如您所见，div 高度停止了，我不明白我做错了什么。我添加了准确显示我的问题的代码段。很可能这是我犯的一个我看不到的愚蠢错误。 

/* Default Styles*/
@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');

* {
    margin: 0;
}

html,
body {
    height: 100%;
}

.presentation {
    padding: 50px 0;
    background-color: #f5f5f5;
}

.container {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    line-height: 1;
    position: absolute;
    right: auto;
    left: auto;
    margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000000;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Lexend Deca', sans-serif;
}

h5.title {
    font-size: 18px;
    padding: 20px;
    margin: 0px;
    color: #000000;
    letter-spacing: 1px;
    border-bottom: 1px solid #e6e6e6;
}

ul {
    list-style: none;
}

p {
    color: #333333;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-rendering: optimizeLegibility;
}

/* Left Side Bar */
.inner-left {
    position: absolute;
    left: 16%;
    top: 5%;
    bottom: 0;
    width: 15%;
    background: #fff;
    margin-left: -16px;
}

.inner-left img {
    max-width: 100%;
    height: auto;
}

.inner-left .personal-info {
    position: relative;
    padding: 25px;
    border-bottom: 1px solid #e6e6e6;
}

.inner-left .personal-info li span {
    width: 50%;
    float: left;
    text-transform: uppercase;
    font-weight: bold;
}

.inner-left .personal-info li p {
    margin: 0px;
    line-height: 30px;
}

.inner-left .personal-info li span {
    width: 50%;
    float: left;
    text-transform: uppercase;
    font-weight: bold;
}


/* Right Main Container */
.inner-right {
    position: absolute;
    left: 32%;
    right: 0;
    top: 5%;
    bottom: 0;
    background: #fff;
    width: 50%;
}

.clearfix {
    clear: both;
}

.clearfix:after {
    clear: both;
    content: "";
    display: table;
}
<body>
  <div class="presentation">
    <div class="container clearfix">
      <div class="inner-left">
        <header class="bio-header">
          <h5 class="title">Personal Details</h5>
        </header>
        <img src="JakubProfile.jpeg" alt="jakub-avatar">
        <ul class="personal-info">
          <li>
            <p>
              <span>name</span> Jakub Lemiszewski
            </p>
          </li>
          <li>
            <p>
              <span>age</span> 34
            </p>
          </li>
          <li>
            <p>
              <span>location</span> Copenhagen DK
            </p>
          </li>
          <li>
            <p>
              <span>degree</span> BSc
            </p>
          </li>
          <li>
            <p>
              <span>phone</span> +45 26542598
            </p>
          </li>
          <li>
            <p>
              <span>email</span>
              <a href="mailto:lemiszewski@gmx.com">lemiszewski@gmx.com</a>
            </p>
          </li>
          <li>
            <p>
              <span>gihub</span>
              <a href="https://github.com/Jakub41" target="_blank">Jakub41</a>
            </p>
          </li>
        </ul>
        <h5 class="title">Social Profiles</h5>
        <div class="social-links">
          <ul>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
          </ul>
        </div>
      </div>

      <div class="inner-right">
        <header class="bio-header">
          <h5 class="title">Who Is Jakub?</h5>
        </header>
        <div class="text">
          Descrption of my self
        </div>
      </div>
    </div>
  </div>

最佳答案

您的代码存在一些问题(即使是新的 fiddle )。没有理由在 .container 上定义高度。如果您在 vh 中设置它，该元素将只呈现与当前视口(viewport)一样高的高度，因此无论如何，您都会超出底部。让内部内容定义高度。

对 left 和 top 使用相对定位和百分比也不是最好的方法。

我强烈建议改用 display: flex。

这是一个例子:

/* Default Styles*/

@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');
* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.presentation {
  padding: 50px 0;
  background-color: #f5f5f5;
}

.container {
  background-color: #f5f5f5;
  line-height: 1;
  display: flex;
  padding: 10%;
  align-items: flex-start;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000000;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Lexend Deca', sans-serif;
}

h5.title {
  font-size: 18px;
  padding: 20px;
  margin: 0px;
  color: #000000;
  letter-spacing: 1px;
  border-bottom: 1px solid #e6e6e6;
}

ul {
  list-style: none;
}

p {
  color: #333333;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-rendering: optimizeLegibility;
}


/* Left Side Bar */

.inner-left {
  background: #fff;
  flex: 1 1 15%;
  margin-right: 15px;
}

.inner-right {
  background: #fff;
  flex: 1 1 50%;
}

.inner-left img {
  max-width: 100%;
  height: auto;
}

.inner-left .personal-info {
  padding: 25px;
  border-bottom: 1px solid #e6e6e6;
}

.inner-left .personal-info li p {
  margin: 0px;
  line-height: 30px;
}

.inner-left .personal-info li span {
  text-transform: uppercase;
  font-weight: bold;
}
<body>
  <div class="presentation">
    <div class="container clearfix">
      <div class="inner-left">
        <header class="bio-header">
          <h5 class="title">Personal Details</h5>
        </header>
        <img src="JakubProfile.jpeg" alt="jakub-avatar">
        <ul class="personal-info">
          <li>
            <p>
              <span>name</span> Jakub Lemiszewski
            </p>
          </li>
          <li>
            <p>
              <span>age</span> 34
            </p>
          </li>
          <li>
            <p>
              <span>location</span> Copenhagen DK
            </p>
          </li>
          <li>
            <p>
              <span>degree</span> BSc
            </p>
          </li>
          <li>
            <p>
              <span>phone</span> +45 26542598
            </p>
          </li>
          <li>
            <p>
              <span>email</span>
              <a href="mailto:lemiszewski@gmx.com">lemiszewski@gmx.com</a>
            </p>
          </li>
          <li>
            <p>
              <span>gihub</span>
              <a href="https://github.com/Jakub41" target="_blank">Jakub41</a>
            </p>
          </li>
        </ul>
        <h5 class="title">Social Profiles</h5>
        <div class="social-links">
          <ul>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
            <li>Facebook</li>
          </ul>
        </div>
      </div>

      <div class="inner-right">
        <header class="bio-header">
          <h5 class="title">Who Is Jakub?</h5>
        </header>
        <div class="text">
          Descrption of my self
        </div>
      </div>
    </div>
  </div>
</body>

我已经简化了您的 CSS 属性。在此示例中，我将 .container 设置为 flex 父级。从那里，我为 inner-right 和 inner-left 提供了简写属性 flex。

如果需要，我可以添加更多关于 flex 的信息，但这里是一个很好的起点。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是答案的 fiddle ，您可以使用它: https://jsfiddle.net/adh29m1r/

关于html - 包装容器中彼此相邻的 Div CSS 高度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57813306/

25 4 0
文章推荐： c - 把所有东西都放在头文件中有什么*真正的*问题吗？
文章推荐： linux - PowerDNS 仅适用于本地
文章推荐： python使ssl崩溃
文章推荐： linux - 当 .bashrc 已存在于目录中时无法编辑它
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com