Question

我已经创建了This框，但我无法将其内容设置为相应地延伸到它的高度...一旦视图拉伸到高度 - 内容仍然是固定的......并且不会传播均匀...我试图将填充百分比设置为LI - 但事实并非如此工作....有没有办法只用CSS设置它？

.cont {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box {
  width: 40vw;
  height: 50vh;
}

.row_wrapper {
  display: flex;
  flex-direction: column;
  background-color: grey;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px;
}

.flex-outer {
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px;
}

.flex-row li {
  width: 50%;
  /* padding-right: 10px; */
}

.flex-outer li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
}

.select {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  padding: 5%;
  font-size: 0.7vw;
}

.parameters_btn {
  border: none;
  background-color: #49c8c1;
  border-radius: 0.5vw;
  font-size: 0.9vw;
  padding: 1% 5% 2% 5%;
  color: #fff;
  outline: none;
  width: 50%;
  height: 20%;
}

.parameters_btn:hover {
  background-color: #40afa9;
  outline: none;
}

.parameters_btn:active {
  background-color: #2d7c78;
  outline: none;
}

.user_box_header {
  background-color: #fff;
  min-height: 20%;
  align-items: center;
  justify-content: start;
  display: flex;
  padding-left: 15px;
  border-bottom: 1px solid #e9e9e9;
}

.user_box_header span {
  font-size: 0.8vw;
  color: #3f4760;
  font-family: 'Montserrat Bold', sans-serif;
  font-weight: 600;
}

.user_box_header i:before {
  padding-right: 0.5vw;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #49c8c1;
  font-size: 18px;
}

.user_notifications i:before {
  content: "\f0a2";
}

.user_box_cont {
  min-height: 80%;
  padding: 5px 10px 5px 10px;
}

.material-switch {
  width: 100%;
}

.material-switch>input[type="checkbox"] {
  display: none;
}

.material-switch>label {
  cursor: pointer;
  height: 0px;
  position: relative;
  width: 40px;
}

.material-switch>input[type="checkbox"]+label::before {
  content: "\f222";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #333333;
  text-align: right;
  border: 1px solid #dcdcdc;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1vw;
}

.material-switch>label::before {
  background-color: #f6f6f6;
  border-radius: 50px;
  height: 2.5vh;
  margin-top: -12px;
  position: absolute;
  width: 8vw;
}

.material-switch>label::after {
  /*--button---*/
  content: "";
  font-size: 1vw;
  background-color: #fff;
  border-radius: 50px;
  height: 2.5vh;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  width: 6vw;
  border: 1px solid #dcdcdc;
}

.material-switch>input[type="checkbox"]:checked+label::before {
  background-color: #f6f6f6;
  content: "\f221";
  font-family: FontAwesome;
  text-align: left;
  font-size: 1vw;
}

.material-switch>input[type="checkbox"]:checked+label::after {
  background-color: #fff;
  left: 30px;
}

.femme {
  display: none;
}

.material-switch>input[type="checkbox"]:checked+label>span.homme {
  display: none;
}

.material-switch>input[type="checkbox"]:checked+label>span.femme {
  display: block;
  top: -8px;
}

.homme,
.femme {
  font-family: 'Roboto Light', sans-serif;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #5d5d5d;
  font-size: 0.7vw;
  position: absolute;
  top: -10px;
  z-index: 999;
}

.material-switch>input[type="checkbox"]:checked+label .homme,
.material-switch>input[type="checkbox"]:checked+label .femme {
  left: 43px;
}

.homme::before {
  content: "\f222";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #49c8c1;
  margin-right: 5px;
}

.femme::before {
  content: "\f221";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #49c8c1;
  margin-right: 5px;
}

<div class="cont">
  <div class="box">
    <div class="row_wrapper">
      <div class="user_box_header user_notifications"><i></i>
        <p>NOTIFICATIONS</p>
      </div>
      <div class="user_box_cont">
        <ul class="flex-outer">

          <li>
            <ul class="flex-row">

              <li>
                <p>Select 3</p>
                <select class="params_select">
                            <option>822-0123-56789</option>
                            <option>822-0123-56789</option>
                            <option>822-0123-56789</option>
                          </select>

              </li>
              <li>
                <p>Select 4</p>
                <select class="params_select">
                            <option>Jean-Luc BÉNAZET</option>
                            <option>Jean-Luc BÉNAZET</option>
                            <option>Jean-Luc BÉNAZET</option>
                          </select>

              </li>

            </ul>
            <li>

            </li>
        </ul>
        <ul class="flex-outer">

          <li>
            <ul class="flex-row">

              <li>
                <p>Select 3</p>
                <select class="params_select">
                            <option>822-0123-56789</option>
                            <option>822-0123-56789</option>
                            <option>822-0123-56789</option>
                          </select>

              </li>
              <li>
                <p>Select 4</p>
                <select class="params_select">
                            <option>Jean-Luc BÉNAZET</option>
                            <option>Jean-Luc BÉNAZET</option>
                            <option>Jean-Luc BÉNAZET</option>
                          </select>

              </li>

            </ul>
            <li>
              <button class="parameters_btn">
                          Send
                        </button>
            </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

要使div中的内容适合，您不能将高度设置为固定，请使用height：auto;你可以添加最大高度和最大宽度，也可以添加最小宽度，最小高度。

Answer 2

这是因为你的行包装器高度是静态的，改变它的样式，如下面的代码

.row_wrapper {
    display: flex;
    flex-direction: column;
    background-color: grey;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    height: auto;
}

Answer 3

可能因为.box身高是静态50vh而发生。如果您可以将其更改为auto，则可能会提供所需的输出。

查找更新的fiddler here。希望它有所帮助。

根据高度均匀拉伸div的内容

3 个答案: