如何根据右侧内容增加左侧菜单的高度

Question

我希望左侧的菜单根据右侧的内容而增加，而不是设置所有可用部分的高度。

在这种情况下，我希望左侧菜单在右侧内容的选择10下方完成，然后菜单具有滚动条（我已经在CSS中添加了此滚动条）。

我所拥有的：

我想要的是：（红色箭头是滚动条）

提前谢谢！ ：）

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i');
* {
  font-family: Roboto, sans-serif !important;
}

@media screen and (max-width: 1300px) {
  .wrapper,
  .disclaimer {
    width: 90vw !important;
  }
}

ol {
  text-align: left;
}

.answered {
  font-weight: 900;
}

.answered::after {
  content: '•';
  color: black;
  margin-left: 10px;
  font-size: 15px;
}

.sections-choices {
  display: flex;
  align-items: flex-start;
  border: 1px solid #ddeafa;
  margin: 0 25px 15px 25px;
  width: 95%;
  margin-bottom: 15px;
  background-color: white;
  /* height: 300px;
                min-height: 300px;
                max-height: 350px; */
}

.sections {
  color: gainsboro;
  text-align: left;
  font-size: 13px;
  background-color: white;
  text-decoration: none;
  width: 20%;
  height: inherit;
  overflow-y: scroll;
}

.sections .question-select {
  margin-left: 10px;
}

.sections h4 {
  padding: 5px 0 5px 15px;
  background-color: #3a3838;
  color: white;
  margin-top: 0;
}

.sections .intro-text {
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}

.sections a {
  text-decoration: none;
  color: black;
  padding-left: 15px;
}

.choices {
  color: black;
  font-size: 14px;
  text-align: left;
  width: 80%;
  padding-bottom: 15px;
  height: inherit;
}

.choices-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  background-color: #3a3838;
}

.choices-section-title h4 {
  margin: 0;
  padding: 15px 15px;
  color: white;
}

.choices-title {
  padding: 10px 15px 0 15px;
  line-height: 19px;
}

.help-text {
  padding: 5px 15px 0 15px;
  text-align: right;
  font-size: 11px;
}

.help-text p {
  margin: 0;
}

.choices-radio {
  padding: 15px 15px 0 25px;
}

.choices-radio label {
  /* word-wrap: break-word; */
  white-space: normal;
}

.choices-radio input {
  margin-bottom: 10px;
}


/* TOOLTIP */

.tooltip {
  position: relative;
  font-size: 12px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  color: black;
}

.tooltip img {
  margin-right: 5px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #f7f7f7;
  color: black;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}


/* CHANGE RADIO BUTTONS ASPECT */


/* The container */

.radio-style {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default radio button */

.radio-style input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: gainsboro;
  border-radius: 50%;
}


/* On mouse-over, add a grey background color */

.radio-style:hover input~.checkmark {
  background-color: #ccc;
}


/* When the radio button is checked, add a blue background */

.radio-style input:checked~.checkmark {
  background-color: black;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the indicator (dot/circle) when checked */

.radio-style input:checked~.checkmark:after {
  display: block;
}


/* Style the indicator (dot/circle) */

.radio-style .checkmark:after {
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}


/* SCROLLBAR */


/* width */

 ::-webkit-scrollbar {
  width: 8px;
}


/* Track */

 ::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  background: #888;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<!DOCTYPE html>
<html>

<body style="margin: 0 auto; max-height: 70vh; background-color: #DCE3EA; text-align: center; margin-top: 15px; font-family: Roboto Condensed, sans-serif;">
  <div class="wrapper" style="padding: 15px 0; width: 70vw; margin: 0 auto; background-color: #ffffff; border-radius: 3px; border: 1px solid #c8c8c8;
    box-shadow: 2px 2px 8px #a8a8a8;">


    <div class="sections-choices">
      <div class="sections">
        <h4>1. Section 1</h4>
        <p class="question-select"><a href="">Question 1</a></p>
        <p class="question-select"><a href="">Question 2</a></p>
        <p class="question-select"><a href="">Question 3</a></p>
        <p class="question-select"><a href="">Question 4</a></p>

        <h4>2. Section 2</h4>
        <p class="question-select"><a href="">Question 1</a></p>
        <p class="question-select"><a href="">Question 2</a></p>

        <h4>3. Section 3</h4>
        <p class="question-select"><a href="">Question 1</a></p>
        <p class="question-select"><a href="">Question 2</a></p>
        <p class="question-select"><a href="">Question 3</a></p>

        <h4>4. Section 4</h4>
        <p class="question-select"><a href="">Question 1</a></p>

        <h4>5. Section 5</h4>
        <p class="question-select"><a href="">Question 1</a></p>
        <p class="question-select"><a href="">Question 2</a></p>
        <p class="question-select"><a href="">Question 3</a></p>

        <h4>6. Section 6</h4>
        <p class="question-select"><a href="">Question 1</a></p>
        <p class="question-select"><a href="">Question 2</a></p>
        <p class="question-select"><a href="">Question 3</a></p>
        <p class="question-select"><a href="">Question 4</a></p>
        <p class="question-select"><a href="">Question 5</a></p>
      </div>
      <div class="choices">
        <div class="choices-section-title">
          <h4>Section 1 out of 6</h4>
          <h4>Question 1 out of 4</h4>
        </div>
        <div class="choices-title"><b>1. This is Question 1 ?</b></div>
        <div class="help-text">
          <div class="tooltip">
            <img src="" width="18px"> More information
            <span class="tooltiptext"> Tooltip text </span>
          </div>
        </div>
        <div class="choices-radio">
          <label class="radio-style">Choice 1
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>

          <label class="radio-style">Choice 2
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>

          <label class="radio-style">Choice 3
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>

          <label class="radio-style">Choice 4
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>

          <label class="radio-style">Choice 5
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>

          <label class="radio-style">Choice 6
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>

          <label class="radio-style">Choice 7
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>

          <label class="radio-style">Choice 8
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>

          <label class="radio-style">Choice 9
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>

          <label class="radio-style">Choice 10
                                <input type="radio" value="choice1" name="choice1"><br>
                                <span class="checkmark"></span>
                            </label>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

不太确定如何使用纯CSS实现此操作，但是使用jquery和CSS可以将sections类设置为height：100％并将容器的高度更改为choices类的相同高度，类似这样：

首先，将.eights属性的高度属性添加为100％，这将填充容器。

.sections {
    color: gainsboro;
    text-align: left;
    font-size: 13px;
    background-color: white;
    text-decoration: none;
    width: 20%;
    overflow: scroll;
    height:100%;
}

然后使用一些jquery，可以将其父级的高度更改为与.choices元素相同的高度：

$( document ).ready(function() {

var height = $(".choices").height();

console.log(height);

$(".sections-choices").css("height",height);

});

Answer 2

$( document ).ready(function() {

var height = $(".choices").height();

console.log(height);

$(".sections-choices").css("height",height);

});

        @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i');

        * {
            font-family: Roboto, sans-serif !important;
        }

        @media screen and (max-width: 1300px) {

            .wrapper,
            .disclaimer {
                width: 90vw !important;
            }
        }
        
        body {
          height:438px;
        }
        
        .wrapper {
          height:438px;
        }

        ol {
            text-align: left;
        }


        .answered {
            font-weight: 900;
        }

        .answered::after {
            content: '•';
            color: black;
            margin-left: 10px;
            font-size: 15px;
        }



        .sections-choices {
            display: flex;
            align-items: flex-start;
            border: 1px solid #ddeafa;
            margin: 0 25px 15px 25px;
            width: 95%;
            margin-bottom: 15px;
            background-color: white;
            /* height: 300px;
            min-height: 300px;
            max-height: 350px; */
            
        }

        .sections {
            color: gainsboro;
            text-align: left;
            font-size: 13px;
            background-color: white;
            text-decoration: none;
            width: 20%;
            overflow: scroll;
            height:100%;
        }

        .sections .question-select {
            margin-left: 10px;
        }

        .sections h4 {
            padding: 5px 0 5px 15px;
            background-color: #3a3838;
            color: white;
            margin-top: 0;
        }

        .sections .intro-text {
            padding-top: 2.5px;
            padding-bottom: 2.5px;
        }

        .sections a {
            text-decoration: none;
            color: black;
            padding-left: 15px;
        }

        .choices {
            color: black;
            font-size: 14px;
            text-align: left;
            width: 80%;
            padding-bottom: 15px;
            height: inherit;
        }

        .choices-section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: auto;
            background-color: #3a3838;
        }

        .choices-section-title h4 {
            margin: 0;
            padding: 15px 15px;
            color: white;
        }

        .choices-title {
            padding: 10px 15px 0 15px;
            line-height: 19px;
        }

        .help-text {
            padding: 5px 15px 0 15px;
            text-align: right;
            font-size: 11px;
        }

        .help-text p {
            margin: 0;
        }

        .choices-radio {
            padding: 15px 15px 0 25px;
        }

        .choices-radio label {
            /* word-wrap: break-word; */
            white-space: normal;
        }

        .choices-radio input {
            margin-bottom: 10px;
        }


        /* TOOLTIP */

        .tooltip {
            position: relative;
            font-size: 12px;
            display: inline-flex;
            justify-content: flex-end;
            align-items: center;
            flex-direction: row;
            color: black;
        }

        .tooltip img {
            margin-right: 5px;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 300px;
            background-color: #f7f7f7;
            color: black;
            text-align: left;
            border-radius: 6px;
            padding: 10px;
            /* Position the tooltip */
            position: absolute;
            z-index: 1;
            top: -5px;
            right: 105%;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }


        /* CHANGE RADIO BUTTONS ASPECT */


        /* The container */

        .radio-style {
            display: block;
            position: relative;
            padding-left: 25px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 13px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }


        /* Hide the browser's default radio button */

        .radio-style input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        /* Create a custom radio button */

        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 18px;
            width: 18px;
            background-color: gainsboro;
            border-radius: 50%;
        }

        /* On mouse-over, add a grey background color */

        .radio-style:hover input~.checkmark {
            background-color: #ccc;
        }

        /* When the radio button is checked, add a blue background */

        .radio-style input:checked~.checkmark {
            background-color: black;
        }

        /* Create the indicator (the dot/circle - hidden when not checked) */

        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the indicator (dot/circle) when checked */

        .radio-style input:checked~.checkmark:after {
            display: block;
        }

        /* Style the indicator (dot/circle) */

        .radio-style .checkmark:after {
            top: 6px;
            left: 6px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: white;
        }

        /* SCROLLBAR */
        /* width */

        ::-webkit-scrollbar {
            width: 8px;
        }

        /* Track */

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        /* Handle */

        ::-webkit-scrollbar-thumb {
            background: #888;
        }

        /* Handle on hover */

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="margin: 0 auto; max-height: 70vh; background-color: #DCE3EA; text-align: center; margin-top: 15px; font-family: Roboto Condensed, sans-serif;">
    <div class="wrapper">


        <div class="sections-choices">
            <div class="sections">
                <h4>1. Section 1</h4>
                <p class="question-select"><a href="">Question 1</a></p>
                <p class="question-select"><a href="">Question 2</a></p>
                <p class="question-select"><a href="">Question 3</a></p>
                <p class="question-select"><a href="">Question 4</a></p>

                <h4>2. Section 2</h4>
                <p class="question-select"><a href="">Question 1</a></p>
                <p class="question-select"><a href="">Question 2</a></p>

                <h4>3. Section 3</h4>
                <p class="question-select"><a href="">Question 1</a></p>
                <p class="question-select"><a href="">Question 2</a></p>
                <p class="question-select"><a href="">Question 3</a></p>

                <h4>4. Section 4</h4>
                <p class="question-select"><a href="">Question 1</a></p>

                <h4>5. Section 5</h4>
                <p class="question-select"><a href="">Question 1</a></p>
                <p class="question-select"><a href="">Question 2</a></p>
                <p class="question-select"><a href="">Question 3</a></p>

                <h4>6. Section 6</h4>
                <p class="question-select"><a href="">Question 1</a></p>
                <p class="question-select"><a href="">Question 2</a></p>
                <p class="question-select"><a href="">Question 3</a></p>
                <p class="question-select"><a href="">Question 4</a></p>
                <p class="question-select"><a href="">Question 5</a></p>
            </div>
            <div class="choices">
                <div class="choices-section-title">
                    <h4>Section 1 out of 6</h4>
                    <h4>Question 1 out of 4</h4>
                </div>
                <div class="choices-title"><b>1. This is Question 1 ?</b></div>
                <div class="help-text">
                    <div class="tooltip">
                        <img src="" width="18px"> More information
                        <span class="tooltiptext"> Tooltip text </span>
                    </div>
                </div>
                <div class="choices-radio">
                    <label class="radio-style">Choice 1
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>

                    <label class="radio-style">Choice 2
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>

                    <label class="radio-style">Choice 3
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>

                    <label class="radio-style">Choice 4
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>

                    <label class="radio-style">Choice 5
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>

                    <label class="radio-style">Choice 6
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>

                    <label class="radio-style">Choice 7
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>

                    <label class="radio-style">Choice 8
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>

                    <label class="radio-style">Choice 9
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>

                    <label class="radio-style">Choice 10
                        <input type="radio" value="choice1" name="choice1"><br>
                        <span class="checkmark"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</body>