Div拒绝成为父母的100％身高

时间：2018-08-23 13:24:53

标签： html css

我的html中的左侧“栏”有点问题（请参见下面的代码段）。

不会是父级的100％高度。我已经尝试了几个小时，但不确定为什么它不会达到100％的高度。

找到我想要的结果here

请注意，我无法使用以下代码，因为该代码用于SharePoint中的Webpart。

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


.pvClientViewer_704ae523 {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  vertical-align: top
}

.pvClientViewer_704ae523 .list_intro_704ae523 {
  background: #2c3e50;
  color: #fff;
  box-sizing: border-box;
  display: inline-block;
  padding: 2em 4em 2em 2em;
  width: 100px;
  height: 100%;
  vertical-align: middle
}

.pvClientViewer_704ae523 .list_intro_704ae523>h1 {
  font-size: 1.4em
}

.pvClientViewer_704ae523 .awesome_list_704ae523 {
  counter-reset: my_awesome_list;
  display: inline-block;
  margin-left: -3.4em;
  vertical-align: middle;
  position: relative
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 {
  counter-increment: my_awesome_list;
  margin: 1em 0;
  position: relative;
  width: 100%
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:before {
  content: counter(my_awesome_list, decimal-leading-zero);
  background: #fff;
  border: 10px solid #2c3e50;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  font-size: 1.8em;
  line-height: 2.6em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 2.6em;
  z-index: 2
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:nth-child(n+1):before {
  background: #8e44ad;
  border-color: #2c3e50;
  box-shadow: 0 0 0 3px #8e44ad
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:nth-child(n+1)>span {
  background: #8e44ad
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 span {
  background: #8e44ad;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  position: relative;
  line-height: 2em;
  margin: 0 0 0 -2em;
  padding: 1.2em 2em 1.2em 3em;
  vertical-align: middle
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 span:after {
  background: 0 0;
  content: "";
  position: absolute;
  top: 24%;
  right: 2%;
  width: 50%;
  height: 50%;
  max-width: 300px;
  z-index: -1;
  box-shadow: 0 15px 10px rgba(0, 0, 0, .4);
  transform: rotate(3deg)
}
<div class="pvClientViewer_704ae523">
  <section class="list_intro_704ae523">
  </section>
  <section class="awesome_list_704ae523">
    <div class="awesome_list_item_704ae523"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></div>
    <div class="awesome_list_item_704ae523"><span>Illum placeat aut nam distinctio officiis dolore deset.</span></div>
    <div class="awesome_list_item_704ae523"><span>Dignissimos aliquam, velit odio magni mollitia quos recusate.</span></div>
    <div class="awesome_list_item_704ae523"><span>Labore quibusdam voluptatibus nobis minima reprehen.</span></div>
  </section>
</div>

有没有人知道如何解决此问题，因为我现在真的很空白。

6 个答案:

答案 0 :(得分：1)

确定元素的位置：

.pvClientViewer_704ae523 {
  margin: 0;
  padding: 0;
  width: 100%;
  vertical-align: top;
  position:relative;
}

.pvClientViewer_704ae523 .list_intro_704ae523 {
  position:absolute;
  background: #2c3e50;
  color: #fff;
  box-sizing: border-box;
  display: inline-block;
  padding: 2em 4em 2em 2em;
  width: 100px;
  height: 100%;
  vertical-align: middle
}

.pvClientViewer_704ae523 .list_intro_704ae523>h1 {
  font-size: 1.4em
}

.pvClientViewer_704ae523 .awesome_list_704ae523 {
  counter-reset: my_awesome_list;
  display: inline-block;
  vertical-align: middle;
  position: relative
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 {
  counter-increment: my_awesome_list;
  margin: 1em 0;
  position: relative;
  width: 100%
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:before {
  content: counter(my_awesome_list, decimal-leading-zero);
  background: #fff;
  border: 10px solid #2c3e50;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  font-size: 1.8em;
  line-height: 2.6em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 2.6em;
  z-index: 2
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:nth-child(n+1):before {
  background: #8e44ad;
  border-color: #2c3e50;
  box-shadow: 0 0 0 3px #8e44ad
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:nth-child(n+1)>span {
  background: #8e44ad
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 span {
  background: #8e44ad;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  position: relative;
  line-height: 2em;
  margin: 0 0 0 -2em;
  padding: 1.2em 2em 1.2em 3em;
  vertical-align: middle
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 span:after {
  background: 0 0;
  content: "";
  position: absolute;
  top: 24%;
  right: 2%;
  width: 50%;
  height: 50%;
  max-width: 300px;
  z-index: -1;
  box-shadow: 0 15px 10px rgba(0, 0, 0, .4);
  transform: rotate(3deg)
}
<div class="pvClientViewer_704ae523">
  <section class="list_intro_704ae523">
  </section>
  <section class="awesome_list_704ae523">
    <div class="awesome_list_item_704ae523"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></div>
    <div class="awesome_list_item_704ae523"><span>Illum placeat aut nam distinctio officiis dolore deset.</span></div>
    <div class="awesome_list_item_704ae523"><span>Dignissimos aliquam, velit odio magni mollitia quos recusate.</span></div>
    <div class="awesome_list_item_704ae523"><span>Labore quibusdam voluptatibus nobis minima reprehen.</span></div>
  </section>
</div>

答案 1 :(得分：0)

您没有在任何地方设置明确的高度...。但是我注意到您将html和body的高度设为100％。您是否要达到100％的窗口高度？如果是这样，请将此标签添加到文档的开头 <meta name="viewport" content="width=device-width, initial-scale=1.0">，然后您可以将div的窗口高度设为100％，例如height: 100vh或100％的宽度，例如width: 100vw

答案 2 :(得分：0)

将边框更改为内容框，并调整填充以适合需要。

.list-intro {
  background: #2C3E50;
  color: #FFF;
  box-sizing: content-box;
  display: inline-block;
  padding: 2em 0em 2em 0em;
  width: 100px;
  height: 100%;
  vertical-align: middle;
}

答案 3 :(得分：0)

我认为这可以解决您的问题：

  

我已经用position: absolute;来解决您的错误了。

.pvClientViewer_704ae523 {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  vertical-align: top;
  position: relative;
  /*margin-left:20px;*/
}

.pvClientViewer_704ae523 .list_intro_704ae523 {
  background: #2c3e50;
  color: #fff;
  box-sizing: border-box;
  display: inline-block;
  padding: 2em 4em 2em 2em;
  width: 100px;
  height: 100%;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
}

.pvClientViewer_704ae523 .list_intro_704ae523>h1 {
  font-size: 1.4em
}

.pvClientViewer_704ae523 .awesome_list_704ae523 {
  counter-reset: my_awesome_list;
  display: inline-block;
  /*margin-left: -3.4em;*/
  vertical-align: middle;
  position: relative;
  left: 0;
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 {
  counter-increment: my_awesome_list;
  margin: 1em 0;
  position: relative;
  width: 100%
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:before {
  content: counter(my_awesome_list, decimal-leading-zero);
  background: #fff;
  border: 10px solid #2c3e50;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  font-size: 1.8em;
  line-height: 2.6em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 2.6em;
  z-index: 2
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:nth-child(n+1):before {
  background: #8e44ad;
  border-color: #2c3e50;
  box-shadow: 0 0 0 3px #8e44ad
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:nth-child(n+1)>span {
  background: #8e44ad
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 span {
  background: #8e44ad;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  position: relative;
  line-height: 2em;
  margin: 0 0 0 -2em;
  padding: 1.2em 2em 1.2em 3em;
  vertical-align: middle
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 span:after {
  background: 0 0;
  content: "";
  position: absolute;
  top: 24%;
  right: 2%;
  width: 50%;
  height: 50%;
  max-width: 300px;
  z-index: -1;
  box-shadow: 0 15px 10px rgba(0, 0, 0, .4);
  transform: rotate(3deg)
}
<div class="pvClientViewer_704ae523">
  <section class="list_intro_704ae523">
  </section>
  <section class="awesome_list_704ae523">
    <div class="awesome_list_item_704ae523"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></div>
    <div class="awesome_list_item_704ae523"><span>Illum placeat aut nam distinctio officiis dolore deset.</span></div>
    <div class="awesome_list_item_704ae523"><span>Dignissimos aliquam, velit odio magni mollitia quos recusate.</span></div>
    <div class="awesome_list_item_704ae523"><span>Labore quibusdam voluptatibus nobis minima reprehen.</span></div>
  </section>
</div>

希望这对您有所帮助。

答案 4 :(得分：0)

在课程.pvClientViewer_704ae523中，我添加了属性-display: flex;

在类.pvClientViewer_704ae523 .list_intro_704ae523中，我删除了这些属性-padding: 2em 4em 2em 2em; height: 100%;

看看这是否是您想要的。

.pvClientViewer_704ae523 {
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  vertical-align: top
}

.pvClientViewer_704ae523 .list_intro_704ae523 {
  background: #2c3e50;
  color: #fff;
  box-sizing: border-box;
  display: inline-block;
  width: 100px;
}

.pvClientViewer_704ae523 .list_intro_704ae523>h1 {
  font-size: 1.4em
}

.pvClientViewer_704ae523 .awesome_list_704ae523 {
  counter-reset: my_awesome_list;
  display: inline-block;
  margin-left: -3.4em;
  vertical-align: middle;
  position: relative
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 {
  counter-increment: my_awesome_list;
  margin: 1em 0;
  position: relative;
  width: 100%
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:before {
  content: counter(my_awesome_list, decimal-leading-zero);
  background: #fff;
  border: 10px solid #2c3e50;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  font-size: 1.8em;
  line-height: 2.6em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 2.6em;
  z-index: 2
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:nth-child(n+1):before {
  background: #8e44ad;
  border-color: #2c3e50;
  box-shadow: 0 0 0 3px #8e44ad
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523:nth-child(n+1)>span {
  background: #8e44ad
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 span {
  background: #8e44ad;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  position: relative;
  line-height: 2em;
  margin: 0 0 0 -2em;
  padding: 1.2em 2em 1.2em 3em;
  vertical-align: middle
}

.pvClientViewer_704ae523 .awesome_list_704ae523 .awesome_list_item_704ae523 span:after {
  background: 0 0;
  content: "";
  position: absolute;
  top: 24%;
  right: 2%;
  width: 50%;
  height: 50%;
  max-width: 300px;
  z-index: -1;
  box-shadow: 0 15px 10px rgba(0, 0, 0, .4);
  transform: rotate(3deg)
}
<div class="pvClientViewer_704ae523">
  <section class="list_intro_704ae523">
  </section>
  <section class="awesome_list_704ae523">
    <div class="awesome_list_item_704ae523"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></div>
    <div class="awesome_list_item_704ae523"><span>Illum placeat aut nam distinctio officiis dolore deset.</span></div>
    <div class="awesome_list_item_704ae523"><span>Dignissimos aliquam, velit odio magni mollitia quos recusate.</span></div>
    <div class="awesome_list_item_704ae523"><span>Labore quibusdam voluptatibus nobis minima reprehen.</span></div>
  </section>
</div>

答案 5 :(得分：-1)

问题是显示方式。 您需要显示：块；然后浮动：向左； 

.list-intro {
background: #2C3E50;
color: #FFF;
box-sizing: none;
display: block;
padding: 0;
width: 100px;
height: 100%;
vertical-align: middle;
float: left;

}

相关问题
最新问题