Question

我需要flexbox 来填充垂直空间，具体取决于浏览器网站，我得到了帮助。我今天发现了一个新问题，我不知道如何解决。如果我在网站上的内容区域中收到太多信息，我需要扩展页面。如果我从主体中移除flexbox，它可以正常工作，但它不会填满垂直空间。

所以我仍然认为我应该使用flexbox，但不知道如何解决它，以及它是否正确。有没有人有任何解决这个问题的技巧？

正如我所说的，我尝试删除了flexbox，但这会破坏我的其他设置，而且我还试图将代码中的“区域”分开，但这会使语法过于混乱。

问题：如果我收到太多信息（例如输入栏或图像或类似的东西），则网站不会扩展。因为它设置为填充垂直大小。我需要它来扩展。蓝色侧面菜单和白色内容框都应扩展到相同的高度。

CodePen :(此处有注释掉的代码，显示网站被压扁） https://codepen.io/anon/pen/vJwOqa?editors=1100

感谢您的帮助:)

HTML CODE

      <!--__________HEADER_________-->
  <section id="header">
          <div class="adminTitle"><h5>HEADER</h5></div>
  </section>
  <!--__________CONTENT_________-->
  <section id="main">
        <div id="sideMenu">
          <div id="sideMenuInner">
            <div class="sideMenuOption"><h5>Option One</h5></div>
            <div class="sideMenuOption"><h5>Option Two</h5></div>
            <div class="sideMenuOption"><h5>Option Three</h5></div>
            <div class="sideMenuOption"><h5>Option Four</h5></div>
            <div class="sideMenuOption"><h5>Option Five</h5></div>
            <div class="sideMenuOption"><h5>Option Six</h5></div>
            <div class="sideMenuOption"><h5>Option Seven</h5></div>
            <div class="sideMenuOption"><h5>Option Eigth</h5></div>
          </div>
        </div>
        <div id="contentContainer">
          <div id="ribbon">
            <div id="ribbonInner">
              <div class="ribbonTitle"><h4>Option Two</h4></div>
            </div>
          </div>
          <div id="content">
            <div id="contentInner">
              <div class="adminInputInner">
                <label for="fullname" class="adminLabel">Email</label>
                <input class="adminInputField" type="text">
              </div>
              <div class="adminInputInner">
                <label for="fullname" class="adminLabel">Full name</label>
                <input class="adminInputField" type="text">
              </div>
              <div class="adminInputInner">
                <label for="fullname" class="adminLabel">Password</label>
                <input class="adminInputField" type="text">
              </div>
              <!-- REMOVE COMMENT TO SEE THE SITE GET SQUISHED 
              <div class="adminInputInner">
                <label for="fullname" class="adminLabel">More input</label>
                <input class="adminInputField" type="text">
              </div>
              <div class="adminInputInner">
                <label for="fullname" class="adminLabel">Even more input</label>
                <input class="adminInputField" type="text">
              </div>
              <div class="adminInputInner">
                <label for="fullname" class="adminLabel">Some more input</label>
                <input class="adminInputField" type="text">
              </div>
              -->
              <div class="adminInputInner">
                <button class="adminBtn">Exicute option two</button>
              </div>
            </div>
          </div>
        </div>
      </section>
  <!--__________FOOTER_________-->
      <section id="footer">
        <div id="footerInner">
          <div id="footerTextOne" class="footerText"><a><h5>Rules</h5></a></div>
          <div id="footerTextTwo" class="footerText"><a><h5>Footer Policy</h5></a></div>
          <div id="footerTextThree" class="footerText"><a><h5>&copy; Footer 2017</h5></a></div>
        </div>
      </section>

CSS代码

*{
    margin: 0;
    padding: 0;
    border: 0;
  }

  body {
    min-height:100vh;
    margin:0;
    background-color: #efefef;
    font-family: "Poppins";
    color: white;
  }

  html {
    height:100%;
  }

  html,body {
    display:flex;
    flex-direction:column;
  }

  /*________HEADER_______*/

  #header {
    background-color: #151515;
    margin: 0 0 10px 0;
    width: 100%;
    height: 65px;
    display: flex;
    flex-wrap: wrap;
    color: white;
  }

  /*_________CONTENT_________*/

  #main {
    flex:1;
    display:flex;
  }

  #contentContainer {
    flex: 4;
    display: flex;
    flex-direction: column;
  }

  #sideMenu {
    display: flex;
    flex: 1;
    width:250px;
    background-color: #3786c8;
    margin: 0 10px 0 0;
  }

  #sideMenuInner {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 10px auto;
    flex-direction: column;
  }

  .sideMenuOption {
    padding: 10px;
  }

  .sideMenuOption:hover{
    background-color: #4394d8;
  }

  #ribbon {
    background-color: white;
    flex: 1;
    margin-bottom: 10px;
    display: flex;
  }

  #ribbonInner{
    display: flex;
    justify-content: flex-start;
  }

  .ribbonTitle {
    color: #151515;
    margin: auto auto auto 10px;
  }

  #content {
    background-color: white;
    flex: 8;
    display: flex;
  }

  #contentInner{
    display: flex;
    flex: .5;
    flex-direction: column;
    margin: 0 auto;
  }

  .adminInputInner{
    display: flex;
    flex-direction: column;
  }

  .adminLabel{
    color: #151515;
  }

  .adminInputField{
    border: solid gray 1px;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 10px;
  }

  .adminLabel{
    color: #151515;
    margin: 10px 0 0 10px;
  }

  .adminBtn{
    background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    border-radius: 5px;
    color: white;
    padding: 13px 15px;
    margin: 10px;
  }

  /*_______FOOTER_______*/

  #footer{
    width: 100%;
    height: 60px;
    background-color: #151515;
    display: flex;
    margin-top: 10px;
  }

  #footerInner{
    display: flex;
    color: white;
    margin: auto;
  }

  .footerText{
    margin: 0em 1em;
    text-align: center;
  }

让flexbox填满垂直空间，如果需要也可以扩展

0 个答案: