0
私はThisというボックスを作成しましたが、高さに応じてストレッチするコンテンツを設定することはできません。均等に拡散していません...私はLIにパーセンテージでパディングを設定しようとしましたが、それは ではありません... CSSでのみ設定する方法はありますか？divのコンテンツを高さに応じて均等に伸ばします
.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>
送信ボタンが隠れているという問題がありますか？ –
RaJesh RiJo - そうではありません...要素のパディングは反応しません。したがって、高さを伸ばすとコンテンツが均等に伸びない – RoyBarOn