html - 将一个 div 减半并达到 100% 高

Question

我正在使用 Boostrap 3 并将我的网站分成几个部分，每个 DIV 是浏览器窗口高度的 100%。现在我在 Bootstrap 3 中使用通用网格和列，但我想要一个高度为 100%、宽度为内容左侧 div 的 30% 的图像

我真的很难理解代码的去向？

![<div id='imgDiv2'>


<div class="container">

    <div class="row">


            <div class="col-md-8">



                <div class="panel panel-default" style=" border: 0; box-shadow: none;">
                    <div class="panel-body" style="font-size: 30px;font-weight: 300;"></div>
                </div>

                <div class="panel panel-default" style=" border: 0; box-shadow: none;">
                    <div class="panel-body" style="font-size: 30px;font-weight: 300;">about me</div>
                </div>

           </div>   


        <div class="col-md-4">

                <div class="panel panel-default" style=" border: 0; box-shadow: none;">
                    <div class="panel-body" style="font-size: 30px;font-weight: 300;"></div>
                </div>

           </div>           


</div>

因此在示例中，右侧的内容仍需要位于 col-md-8 中或我需要的任何宽度。

Answer 1

我认为您对 % heights 在 css 中的工作方式有误解。

一个元素总是100%高，100%指的是元素自身的高度，而不是父元素的高度。

另外，html 还没有正确地做列，这是打印世界中的一个常见比喻。

要完成您需要的操作，您可能需要一些 jquery/其他 javascript 来检测两个 div 中哪个具有更大的高度，并将较小的高度设置为较大的高度。

然后您有两个图像选项:左侧区域的 css 背景或 html img 标签(在本例中为 col-md-4)

另一方面，您提供的标记与下面的图像不同(标记给出的左侧区域是右侧区域的两倍)