css - 具有 3 个随机大小列和底部的 div 模板

Question

我用这个模板

<style>
    #block_center{
        position: absolute;
        right: 210px;
        left: 210px;
        text-align: left;
        border: 1px solid #000;
        overflow: auto;
        height: auto;
    }
    #block_right{
        width: 200px;
        border: 1px solid #000;
        position: relative;
        right: 3px;     
        text-align: left;
        float: right;   
    }
    #block_left{
        position: relative;
        left: 3px;
        width: 200px;
        border: 1px solid #000;
        text-align: left;
        float: left;
    }        
    #block_content{
        clear: both;
        float: none;
        width: 100%;
        text-align: center;
        overflow-y:auto;
        overflow-x:auto;
        height: auto;
      /* margin-bottom: -50px; */
        margin: auto;

    }
    #block_buttom { 
        background-color: blue;
       /* z-index:  -10; */
        width: 100%;

        height: 50px;
        clear: both;
        }

    .clear {
        clear:both;
        overflow:hidden;
           }  

</style>

<div id="block_content">
    <div id="block_center"> ARTICLE <br> article_ajax_content </div>
    <div id="block_right"> Artile links </div>
    <div id="block_left"> banner </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
<div id="block_buttom"> some text info about site and 31px height img </div>

我遇到的问题是 Article 不仅可以是随机高度大小，而且后面还有随机大小内容的 ajax block ，我根本不能绝对坚持底部 div 在浏览器窗口的所有内容之后留在底部大小、内容大小、ajax block 大小...

任何人都可以帮助我了解 css(我不想使用 jQuery 将底部 block 固定到固定的 y 坐标)对于我的使用模式应该是什么样子？

Answer 1

使所有 block 相对定位，并使用百分比而不是像素给出高度和宽度。

确保所有高度百分比的总和为 100%(以防您想要覆盖整个屏幕)。

这可确保您的页面内容覆盖整个屏幕，无论屏幕分辨率如何。

每个 block 的相对大小在所有分辨率下也保持相同。

关键是使用 PERCENTAGE 值而不是 PIXEL 值。

要解决动态大小的文章数据，只需 CSS 文章 div 使其具有滚动条即可。