Html 设置高度（以百分比为单位）

我重写了这个问题，以反映人们提出的信息

首先，如果你去

你会看到我想要的东西。宽屏和平板电脑正是我想要的。您可以在左栏中看到描述性部分，在右栏中看到地图。能够同时看到这两者对于信息的使用是很重要的。这两个s的高度是固定的

对于手机等小型设备，地图位于“说明”下。为了便于描述，我降低了图片的高度。现在，地图的描述是固定的，太大了，无法在手机上完全与描述一起查看

我想要的是，在狭窄的手机盒中，地图的高度自动缩放，以填充剩余的垂直空间。使用“auto”不起作用，因为它会缩放屏幕的高度以适应内容，而不是可用空间

我试过用百分比表示高度（25%表示描述，60%表示地图）。这是行不通的。它应该可以工作，但我可能有一个问题，因为这些是容器的百分比而不是屏幕的百分比，并且两个s不在同一个容器中

我用的是bootstrap3

你知道怎么让这对我有用吗

以下是缩小版本的代码，即与最终版本相比描述更少。跳到底到CSS信息

<div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="set_margin_col1"> <img class="img-responsive" src="../../../assets/logos/skitours_title_756w.gif" alt="Logo"> </div>
                <div class="tour_title">Andesite Peak </div>
                <div id="description" class="set_margin_col1">
                    <p class="des_section"><br>
                Summary &nbsp;<a href="../../general/summary.htm"><img src="../../../assets/icons/info_icon_3.png" alt="Link to more information about summary" width="13" height="13" style="margin-top: -2px" title="Link to more information about summary"></a></p>
                    <table class="table table-bordered table-sm">
                        <tbody>
                            <tr>
                            <td class="summary_left_col">Difficulty</td>
                            <td class="summary_right_col"><!-- InstanceBeginEditable name="difficulty" --><strong>3</strong> Intermediate<!-- InstanceEndEditable --></td>
                        </tr>
                        <tr>
                            <td class="summary_left_col">Length</td>
                            <td class="summary_right_col"><!-- InstanceBeginEditable name="length" -->4.6 miles round trip<!-- InstanceEndEditable --></td>
                        </tr>
                        <tr>
                            <td class="summary_left_col">Starting<br>
                            Elevation</td>
                            <td class="summary_right_col"><!-- InstanceBeginEditable name="start_elev" -->7200 feet<!-- InstanceEndEditable --></td>
                        </tr>
                        <tr>
                            <td class="summary_left_col">Cumulative<br>
                            Elevation<br>
                            Change</td>
                            <td class="summary_right_col"><!-- InstanceBeginEditable name="cum_elev" -->+1000, -1000 round trip<!-- InstanceEndEditable --></td>
                        </tr>
                    </tbody>
                </table>
                <p class="des_section"> Description  &nbsp; <a href="../../general/description.htm"><img src="../../../assets/icons/info_icon_3.png" alt="Link to more information about description" width="13" height="13" style="margin-top: -2px" title="Link to more information about description"></a></p>
                <!-- InstanceBeginEditable name="tour_description" -->
                <p class="des_paragraph">Andesite Peak is a dramatic setting for a snack or lunch. The peak is the high point on Andesite Ridge, overlooks Castle Valley to the east, and has a primo panoramic view that includes Castle Peak.</p>
                <p class="des_paragraph">The tour described here is the easiest route to the summit. More adventurous skiers can follow the more direct Andesite Ridge and Peak tour. This tour can also be turned into<span style="font-family: 'Times New Roman', Times, serif"> a loop as described in the Andesite Ridge Loop tour.</span></p>
                <!-- InstanceEndEditable -->
                <p class="des_section">Mileage Log  &nbsp; <a href="../../general/mileage_log.htm"><img src="../../../assets/icons/info_icon_3.png" alt="Link to more information about mileage log" width="13" height="13" style="margin-top: -2px" title="Link to more information about mileage log"></a><br>
                    <span class="des_numbers">Numbers in parentheses<br>
                correspond to mileage points on map</span></p>
                <!-- InstanceBeginEditable name="mileage_log" -->
                <p id="WP_1" class="des_paragraph"><span class="des_route_segment">Waypoint 1 to 2</span><br>
                Miles: <span class="des_mileage_elevation">0.0 - 0.3</span><br>
                Elevation change: <span class="des_mileage_elevation">+100 feet</span>&nbsp;</p>
                <p class="des_paragraph">From the <span class="des_points">trailhead (1)</span> ski east on the snow-covered road that parallels the interstate and then northwest for a total of 0.3 mile until you reach a <span class="des_points">road junction (2)</span>. The road continuing northwest (straight) leads to Castle Valley, which is closed to snowmobile use, while this tour follows the road to the west (left).&nbsp;</p>
                <!-- InstanceEndEditable --> </div>
        </div>
        <div class="col-md-6">
            <div id="menu_wrapper" class="set_margin_col2"> <span class="menu_bar">Find Tours Using &nbsp;<a href="../../find_tours/find_index.htm" title="Link to index of tours" target="_self">INDEX</a>&nbsp; <a href="../../find_tours/find_map.htm" title="Link to interactive map of tours" target="_self">MAP</a> &nbsp;  |  &nbsp; <!-- InstanceBeginEditable name="profile" --><a href="0312_profile.htm" title="Link to elevation profile of tour" target="_self">Profile</a><!-- InstanceEndEditable --> &nbsp; | &nbsp; <!-- InstanceBeginEditable name="description" --><a href="#" title="Link to description of tour" target="_self">Description</a><!-- InstanceEndEditable --> &nbsp; | &nbsp; <!-- InstanceBeginEditable name="map" --><a href="#" title="Link to map of tour" target="_self">Map</a><!-- InstanceEndEditable --> &nbsp; | &nbsp;<!-- InstanceBeginEditable name="waypoinnts" --> <a href="#" title="Link to waypoint data for tour" target="_self">Waypoints</a><!-- InstanceEndEditable -->&nbsp;<a href="../../general/menu.htm"><img src="../../../assets/icons/info_icon_3.png" alt="Link to more information about menu" width="13" height="13" style="margin-top: -2px" title="Link to more information about menu"></a></span> </div>
            <div id="myContainer"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="footer">
                <p><!-- #BeginLibraryItem "/library/copyright.lbi" --><a href="../../general/copyright.htm">© 2020 Marcus Libkind</a><!-- #EndLibraryItem -->&nbsp; &nbsp; &nbsp;|&nbsp; &nbsp;<a href="../../general/disclaimer.htm" title="Link to disclaimer" target="_self"> Disclaimer</a>&nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp;<a href="#" title="Link to contact form" target="_self">Contact</a>&nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp;<span class="des_section">Hosted&nbsp;by&nbsp;<a href="https://www.snowlands.org" title="Link to Snowlands Network" target="_self">Snowlands&nbsp;Network</a></span></p>
            </div>
        </div>
    </div>
</div>

对于小型设备，CSS中的@media规则如下所示。#description的高度已大幅降低，但对于#myContainer，它只降低了一点，并且仍然是固定的。如何使myContainer填满可用的垂直空间，但不大于可用的垂直空间

@media (max-width: 991px) {
#description {
    height: 150px;
    background-color: #EEEEEE;
    overflow: auto;
    padding: 0px 15px 15px 15px;
}
#myContainer {
    position: relative;
    width: 100%;
    height: 450px;
    background-color: #EEEEEE;
}
}

---

我有一个很好的解决方案。可以将高度设置为视口高度的百分比，而不是设置不起作用的百分比。我使用xxxvh而不是xxx%。

我有一个非常好的解决方案。可以将高度设置为视口高度的百分比，而不是设置不起作用的百分比。我使用xxxvh而不是xxx%。

也许可以用

bootstrap

标记它，这样后台人员也可以加入到乐趣中来（正如您的问题所关注的那样）。我会考虑<代码>格式化>代码>或<代码> FrasBox < /代码>，这将解决您的所有问题并大大降低您的代码复杂度-包括删除所有名为

div

itis的古怪类。您可以发布一些HTML代码，让我们看看它是如何布局的吗？也许可以用

bootstrap

标记它，以便后端也可以加入到乐趣中来（正如您的问题所关注的那样）。我会考虑<代码>格式化<格式化>或<代码> FrasBox < /代码>，这将解决所有问题并减少代码复杂度，包括删除所有名为“代码> div <代码> iTISE的古怪类。您可以张贴一些HTML代码，这样我们就可以看到它的全部布局了吗？

@media (max-width: 991px) {
#description {
    height: 150px;
    background-color: #EEEEEE;
    overflow: auto;
    padding: 0px 15px 15px 15px;
}
#myContainer {
    position: relative;
    width: 100%;
    height: 450px;
    background-color: #EEEEEE;
}
}