时间戳

首页 > 解决方案 > 如何确保高度：0；也包括填充？

html - 如何确保高度：0；也包括填充？

问题描述

我有这个整洁的 CSS 手风琴，它工作得很好，直到我尝试在.accordBody.

手风琴的整个“魔力”由简单的技巧组成，即增加.accordBodyfrom0到125pxthe:focus的高度.accordHeader。

.accordion {
  border: solid 1px #cccccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px -1px #b3b3b3;
}

.accordion .accord .accordHeader,
.accordion .accord .accordBody {
  background-color: #fff;
  padding: 1rem;
}

.accordion .accord .accordHeader {
  border-bottom: solid 1px #cccccc;
  color: #000;
  cursor: pointer;
}

.accordion .accord .accordBody {
  padding: 0;
  box-shadow: inset 0px 2px 4px -1px #e6e6e6;
  height: 0;
  transition: height 250ms ease;
  overflow: hidden;
}

.accordion .accord:focus>*~.accordBody {
  height: 125px;
  overflow: auto;
}

.accordion .accord:focus+.accord .accordHeader {
  border-top: solid 1px #cccccc;
}
<div class="accordion">
  <div class="accord" tabindex="0">
    <div class="accordHeader">
      Header
    </div>
    <div class="accordBody">
      Body
    </div>
  </div>
  <div class="accord" tabindex="0">
    <div class="accordHeader">
      Header
    </div>
    <div class="accordBody">
      Body
    </div>
  </div>
  <div class="accord" tabindex="0">
    <div class="accordHeader">
      Header
    </div>
    <div class="accordBody">
      Body
    </div>
  </div>

现在从视觉上看，这看起来并不美观，因为.accordBody. 但是，如果我现在尝试添加所述填充，则设计会中断，因为填充会导致保持打开.accordBody，尽管它height设置为0。

.accordion {
  border: solid 1px #cccccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px -1px #b3b3b3;
}
.accordion .accord .accordHeader,
.accordion .accord .accordBody {
  background-color: #fff;
  padding: 1rem;
}
.accordion .accord .accordHeader {
  border-bottom: solid 1px #cccccc;
  color: #000;
  cursor: pointer;
}
.accordion .accord .accordBody {
  box-shadow: inset 0px 2px 4px -1px #e6e6e6;
  height: 0;
  transition: height 250ms ease;
  overflow: hidden;
}
.accordion .accord:focus > * ~ .accordBody {
  height: 125px;
  overflow: auto;
}
.accordion .accord:focus + .accord .accordHeader {
  border-top: solid 1px #cccccc;
}
<div class="accordion">
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
      <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
</div>

我如何确保它也height: 0;包括填充？

标签： htmlcss

解决方案

添加一个额外的容器并考虑边距而不是填充

.accordion {
  border: solid 1px #cccccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px -1px #b3b3b3;
}
.accordion .accord .accordHeader {
  background-color: #fff;
  padding: 1rem;
}
.accordion .accord .accordBody {
  background-color: #fff;
}
.accordion .accord .accordBody > div {
  margin:1rem;
}
.accordion .accord .accordHeader {
  border-bottom: solid 1px #cccccc;
  color: #000;
  cursor: pointer;
}
.accordion .accord .accordBody {
  box-shadow: inset 0px 2px 4px -1px #e6e6e6;
  height: 0;
  transition: height 250ms ease;
  overflow: hidden;
}
.accordion .accord:focus > * ~ .accordBody {
  height: 125px;
  overflow: auto;
}
.accordion .accord:focus + .accord .accordHeader {
  border-top: solid 1px #cccccc;
}
<div class="accordion">
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         <div>Body</div>
      </div>
   </div>
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         <div>Body</div>
      </div>
   </div>
      <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         <div>Body</div>
      </div>
   </div>
</div>

如果没有额外的包装，您可以考虑使用伪元素的一些技巧：

.accordion {
  border: solid 1px #cccccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px -1px #b3b3b3;
}
.accordion .accord .accordHeader {
  background-color: #fff;
  padding: 1rem;
}
.accordion .accord .accordBody {
  background-color: #fff;
  padding:0 1rem;
}
.accordion .accord .accordBody:before,
.accordion .accord .accordBody:after{
  content:"";
  display:block;
  height:min(100%,1rem); /* don't make it more than 1rem and it will be 0 on collapse due to 100%x0 */
}
.accordion .accord .accordHeader {
  border-bottom: solid 1px #cccccc;
  color: #000;
  cursor: pointer;
}
.accordion .accord .accordBody {
  box-shadow: inset 0px 2px 4px -1px #e6e6e6;
  height: 0;
  transition: height 250ms ease;
  overflow: hidden;
}
.accordion .accord:focus > * ~ .accordBody {
  height: 125px;
  overflow: auto;
}
.accordion .accord:focus + .accord .accordHeader {
  border-top: solid 1px #cccccc;
}
<div class="accordion">
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
      <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
</div>

推荐阅读