

html,css,bootstrapを使って、ページのデザインを編集しています。  
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。

[![画像の説明をここに入力](https://i.stack.imgur.com/T22k7.png)](https://i.stack.imgur.com/T22k7.png)

恐れ入りますが、手助けいただけないでしょうか？  
以下該当部分のHTMLとCSSです。

▼html

[code]

    <section class="section-box" data-scroll-index="1">
                <div class="container-fluid">
                    <div class="row">
                        
                        <div class="col-lg-6 bg-img half-img bgimg-height" data-background="img/1.jpg"></div>
    
                        <div class="col-lg-6 half-content bg-gray">
                            <div class="box-white">
    
                                <div class="content mb-50">
                                    <h3 class="mb-15 lg-line-height">Test Test Test Test Test Test Test Test Test .</h3>
                                    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test .</p>
                                </div>
                           </div>
                        </div>
    
                    </div>
                </div>
            </section>
    
[/code]

▼css

[code]

    .section-box .half-img {
      background-position: 50% 50%;
    }
    .section-box .half-content {
      padding: 30px;
    }
    .section-box .box-white {
      padding: 100px 10%;
      background: #fff;
      -webkit-box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
              box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
    }
    
    .section-box .accordion .item {
      margin-bottom: 30px;
    }
    .section-box .accordion .title {
      padding: 10px 20px;
      background: #fff;
      -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
              box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
      border-radius: 30px;
      cursor: pointer;
      position: relative;
    }
    .section-box .accordion .title:after {
      content: '\f067';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      font-size: 12px;
      position: absolute;
      top: 12px;
      right: 20px;
    }
    .section-box .accordion .title h6 {
      font-size: 16px;
      font-weight: 500;
    }
    .section-box .accordion .accordion-info {
      display: none;
      padding: 0px 15px;
      margin-top: 30px;
      border-left: 1px dotted #ccc;
    }
    .section-box .accordion .accordion-info .spac {
      margin-top: 30px;
      padding-left: 30px;
    }
    .section-box .accordion .accordion-info .spac h6 {
      position: relative;
      margin-bottom: 15px;
    }
    .section-box .accordion .accordion-info .spac h6:after {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #555;
      position: absolute;
      top: 3px;
      left: -15px;
    }
    .section-box .accordion .accordion-info .spac ul {
      padding-left: 30px;
    }
    .section-box .accordion .accordion-info .spac li {
      margin-bottom: 10px;
      position: relative;
      font-size: 15px;
    }
    .section-box .accordion .accordion-info .spac li:after {
      content: "";
      width: 6px;
      height: 6px;
      border: 1px solid #222;
      border-radius: 50%;
      position: absolute;
      top: 9px;
      left: -15px;
    }
    .section-box .accordion .active {
      display: block;
    }
    .section-box .accordion .active .title {
      color: #fff;
      background: #2AAFC0;
      background: -webkit-gradient(linear, left top, right top, from(#2AAFC0), to(#6976c5));
      background: linear-gradient(to right, #2AAFC0, #6976c5);
      -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
              box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    }
    .section-box .accordion .active .title:after {
      content: '\f068';
    }
    .section-box .vid-butn {
      font-size: 70px;
      color: #2AAFC0;
      position: relative;
      width: 70px;
      height: 70px;
      line-height: 70px;
      z-index: 3;
    }
    .section-box .vid-butn:hover:after {
      -webkit-transform: scale(2, 2);
              transform: scale(2, 2);
      opacity: 0;
      -webkit-transition: all .5s;
      transition: all .5s;
    }
    .section-box .vid-butn:after {
      content: '';
      position: absolute;
      top: -10px;
      bottom: -10px;
      right: -10px;
      left: -10px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      z-index: -1;
      -webkit-transition: all .2s;
      transition: all .2s;
    }
    .section-box .vid-butn:before {
      content: '';
      position: absolute;
      top: -5px;
      bottom: -5px;
      right: -5px;
      left: -5px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      z-index: -1;
    }
    
[/code]

background-imageに対して、background-size:100% 70% にしたり、  
divに対して、height:70%にしたりしましたがうまくいきません。  
右側のグレイの部分のサイズが縮まらなかったりします。

恐縮ですが、アドバイスいただけると幸いです。


CC BY-SA 4.0
2020-12-31T12:47:16.087
72996
2021-01-01T04:25:01.437
40231
question
html css bootstrap
HTML,CSSによるデザインで要素の高さを70%にしたい

[code]

    .section-box .box-white {
      padding: 50px 10%;
      background: #fff;
      -webkit-box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
              box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
    }
    
[/code]

にすることで高さをだいたい70%に縮めることができました。


CC BY-SA 4.0
2021-01-01T04:25:01.437
73001
2021-01-01T04:25:01.437
40231
72996
answer