Question

我正在制作一个带有标题，3列和页脚的响应式网页。我理解的基本内容。

在智能手机大小的显示器上，列将分别为100％宽度和100％视图高度，并将在另一个下方显示一列。每个都漂浮在左边。

随着屏幕尺寸从智能手机尺寸增加到平板电脑尺寸，布局将更改为显示100％宽度和高度的第一列，但其他两列彼此相邻而不是一个另一个，每个都有100％的视图高度，但只有50％的宽度。

我的问题是，在最终列之后并且还向左浮动的页脚在平板电脑布局上缺失，可能是因为它在某处浮动在其他列的下方。如何让页脚显示在最后2列下面而不是隐藏在它们下面？

HTML：

<body>
<div id="wrapper">
    <div id="social_topbar">
        This is the social media bar fixed to the top of the screen.
    </div>

    <header>
    This is hero space.
    </header>   

    <main>

    <div id="column1">
        <div id="block1">This is a Souncloud Player.</div>
    </div>

    <div id="column2">
        <div id="block2">This is a Youtube Video.</div>
        <div id="block3">This is a Band Bio.</div>
    </div>

    <div id="column3">  
        <div id="block4">This is a Twitter Feed.</div>
        <div id="block5">This is a Contact Form.</div>
    </div>

    <footer>
        <h4>This is Footer</h4>
    </footer>

    </main>
</div>

CSS：

/* ===== == = === SMARTPHONE 20em (320px) === = == ===== */

@media only screen and (min-width : 20em) {

#column1, #column2, #column3 {
    width: 100%;
    height: 100vh;
}

#block1 {
    width: 100%;
    height: 100vh;
}

#block2, #block3, #block4, #block5 {
    width: 100%;
    height: 50vh;
}

#footer {
width: 100%;
}
}

/* ===== == = === TABLET 48em (768px) === = == ===== */

@media only screen and (min-width : 48em) {

   #column2, #column3 {
    width: 50%;
    position: absolute;
    float: left;
}

#column3 {
    margin-left: 50%;   
}

#block2, #block3, #block4, #block5 {    
    width: 50%;
    display: inline-block;
}

#footer {
    position: absolute;
    float: left;
    clear: both;
}
 }

非常感谢您的时间和专业知识！提前谢谢！

浮动页脚消失在前面浮动的左右列之下？

0 个答案: