内部如何设置外部元素的100%高度

By simon at 2018-02-07 • 0人收藏 • 41人看过

我有一个flexbox'表',我基本上试图把一个有趣的 顶部的东西。我遇到的问题是bein克无法写入 HTML 我目前的结果[![enter image description 这里](https://i.stack.imgur.com/Gr5cf.png)](HTTPS://i.stack.imgur.com/Gr5cf.png) 我试图得到的结果[![enter image description 这里](https://i.stack.imgur.com/RJxyn.png)(HTTPS://i.stack.imgur.com/RJxyn.png) 我试图做到这一点,没有内心的divs和spans,在做 margin:auto bu不幸的是,它从左侧和右侧重新定位边界 到中间:(所以当前结果的代码是:

.flex-container {
  width: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-container .middle {
  flex: 1;                       
  display: flex;                 
}

.top {
  padding-top: 30px;
  border: 2px solid #05788D;
  display:flex;
}

.leftSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
}

.rightSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
  border-left-style: none;
}

.firstOption
{
	border: 2px solid #05788D;
	border-top-style: none;
	border-bottom-style:none;
}

.anotherOption 
{
	border: 2px solid #05788D;
	border-top-style: none;
	border-bottom-style:none;
	border-left-style:none;
}
<div class="flex-container">

  <div class="top">
  
	<div style="width:50%;">
    <span class="firstOption">One option</span>
	</div>
	
	<div style="width:50%;">
	<span class="anotherOption">Another option</span>
	</div>
	
  </div>

  <div class="middle">

    <div class="leftSide">
      left
    </div>

    <div class="rightSide">
      right
    </div>

  </div>

</div>

5 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

只需使用text-align来控制span的文本对齐,然后使用 在span内填充,不要忘记使他们内联块:

.flex-container {
  width: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-container .middle {
  flex: 1;
  display: flex;
}

.top {
  border: 2px solid #05788D;
  display: flex;
}
.top div {
  flex:1;

}

.leftSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
}

.rightSide{
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
  border-left-style: none;
}
.firstOption  {
 text-align:right;
}

.firstOption span,.anotherOption span{
  border: 2px solid #05788D;
  padding-top: 30px;
  display:inline-block;
}
<div class="flex-container">

  <div class="top">
    <div class="firstOption"><span>One option</span></div>
    <div class="anotherOption"><span>Another option</span></div>

  </div>

  <div class="middle">

    <div class="leftSide">
      left
    </div>

    <div class="rightSide">
      right
    </div>

  </div>

</div>

2018-02-07   #2

只需使用text-align来控制span的文本对齐,然后使用 在span内填充,不要忘记使他们内联块:

.flex-container {
  width: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-container .middle {
  flex: 1;
  display: flex;
}

.top {
  border: 2px solid #05788D;
  display: flex;
}
.top div {
  flex:1;

}

.leftSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
}

.rightSide{
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
  border-left-style: none;
}
.firstOption  {
 text-align:right;
}

.firstOption span,.anotherOption span{
  border: 2px solid #05788D;
  padding-top: 30px;
  display:inline-block;
}
<div class="flex-container">

  <div class="top">
    <div class="firstOption"><span>One option</span></div>
    <div class="anotherOption"><span>Another option</span></div>

  </div>

  <div class="middle">

    <div class="leftSide">
      left
    </div>

    <div class="rightSide">
      right
    </div>

  </div>

</div>

2018-02-07   #3

您可以在左边的选项上使用justify-content: flex-end,使其位于最后 div。我将建议的更改应用于您的代码在这 [小提琴](https://jsfiddle.net/u0b5v8yj/)。 我真的可以推荐[本指南](https://css-tricks.com/snippets/css/a-guide到实现Flexbox /)!

2018-02-07   #4

你已经添加了padding-top: 30px到class="top".相反,内心的孩子(这是 50%)应该有padding-top:30px; 当然这可以做得更好,上面是最快的 解决您的问题。

2018-02-07   #5

您只需继续使用Flexbox以避免进一步的问题。 参见CSS中的注释 堆栈片段

.flex-container {
  width: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-container .middle {
  flex: 1;
  display: flex;
}

.top {
  /*padding-top: 30px;                  removed so border fill height  */
  border: 2px solid #05788D;
  display: flex;
}

.leftSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
}

.rightSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
  border-left-style: none;
}

.top > div {
  flex: 1;                          /*  take 1 part each  */
  display: flex;                    /*  nested flex container  */
}

.firstOption {
  padding-top: 30px;                /*  add here if needed  */
  border: 2px solid #05788D;
  border-top-style: none;
  border-bottom-style: none;
  margin-left: auto;                /*  right align  */
}

.anotherOption {
  padding-top: 30px;                /*  add here if needed  */
  border: 2px solid #05788D;
  border-top-style: none;
  border-bottom-style: none;
  border-left-style: none;
}
<div class="flex-container">

  <div class="top">

    <div>
      <span class="firstOption">One option</span>
    </div>

    <div>
      <span class="anotherOption">Another option</span>
    </div>

  </div>

  <div class="middle">

    <div class="leftSide">
      left
    </div>

    <div class="rightSide">
      right
    </div>

  </div>

</div>

登录后方可回帖

Loading...