Question

我是bootstrap和web开发的新手。我想制作一个响应式div，它始终保持16：9的长宽比。在该响应部分上方具有页眉和页脚部分。但页眉和页脚部分相互堆叠。任何帮助，将不胜感激。

HTML

<div class="post-card-outer">
                <div class="post-card-inner">
                    <div class="space-header">
                    </div>
                    <div class=" post-content">
                        <div class="col-sm-6 content-leftcol">
                            <div class="image-sec-post-card">
                                <img class = "image-post-card" src="3.jpeg">
                            </div>
                        </div>
                        <div class="col-sm-6 content-rightcol">
                            right
                        </div>
                    </div>
                    <div class="space-footer">
                        GGDYGDYGDYGDYGYDGDGYD
                    </div>
                </div><!--post-card-inner-->
            </div><!--post-card-outer-->

CSS

    .post-card-outer{
    width: 100%;
    padding-bottom: 56.25%; /* 16:9= 56.25 %; 4:3 = 75%*/
    position: relative;
    background: coral;
    margin-top:50px;
}
.post-card-inner{
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}
.space-header {margin-top:-10px; height:10px; background-color:red;}
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;}
.post-content{
    min-height:100%; background-color:green;
    position:absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}
.content-leftcol{
    background-color:black;
    width:50%;
    height:100%;
}
.content-rightcol{
    background-color:blue;
    width:50%;
}
.image-sec-post-card{
    border:1px solid white;
  vertical-align: middle;
    overflow: hidden;
}
.image-post-card{
    max-width:100%;
    max-height:100%;
    border:1px solid green;
}

Answer 1

如果您的标题位于最顶部且页脚位于页面/元素的最底部，那么youR可以使用绝对或固定定位。

使用绝对定位时，元素会自动设置为窗口/元素的左上角。您可以将其视为网格上的（0,0）定位。一旦告诉元素绝对定位，您可以使用TOP，RIGHT，BOTTOM和LEFT属性。这些属性直接影响元素的来源。例如Top：0将元素放在窗口的最顶部，Bottom：0将元素放在窗口的最底部。如果你想在元素和窗口的一侧之间放一点空间，那么你可以简单地增加数字。上：20px或上：2vh

固定定位几乎相同，除非您的元素是静态的，即使您尝试向上或向下滚动也不会移动。这就是你如何实现固定导航栏和固定页脚。

.space-header {margin-top:-10px; height:10px; background-color:red;top:0;position:absolute;}

.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;bottom:0;position:absolute;}

Answer 2

body{ margin:0; padding:0; color:#fff;} .space-header {height:50px; background-color:red;} .space-footer {height:50px; background-color:red;color:white;} .post-content{min-height:100%; background-color:green;} .content-leftcol{background-color:black;width:50%;height:47vw; float:left;} .content-rightcol{background-color:blue;width:50%;height:47vw;   float:left;} .image-sec-post-card{border:1px solid white;vertical-align: middle;overflow: hidden;}.image-post-card{max-width:100%; max-height:100%; border:1px solid green;} .clearfix{clear:both; float:none;}

<body><div class="space-header">Header
                </div>
                   <div class="clearfix"></div>
                <div class=" post-content">
                    <div class="col-sm-6 content-leftcol">
                        <div class="image-sec-post-card">
                            <img class = "image-post-card" src="3.jpeg">Left
                        </div>
                    </div>
                    <div class="col-sm-6 content-rightcol">
                        right
                    </div>
                       <div class="clearfix"></div>
                <div class="space-footer">
                  Footer
                </div>
            </div> </body>

两个div相互堆叠起来。怎么避免呢？

2 个答案: