1

我用这个模板

<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>

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

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

4

2 回答 2

0

这是目前我想要的

<style>
     #block_buttom { 
        margin-top: 10pt;
       /* z-index:  -10; */
        width: 100%;
        display: inline-block;
        height: auto;
        clear: both;
        }

    .page-buffer {
        padding-top: 50px inherit;
        height: 50px;
        clear: both;
        width: 100%;
    }      

    .clear {
        clear:both;
        font-size:0;
        overflow:hidden; 
           }  


#block_content {
    width:100%;
    text-align:center;
}

#block_left {
    position: relative;
    top: 0px;
    text-align: left;
    float:left;
    width: 10%;
    min-width:210px;
    height: auto;
    padding:  3px;
}

#block_center {
    text-align: left;
    display: inline-block;
    margin:0 auto;
    width:70%;
    min-width: 640px;
    height: auto;
    padding:  3px;
}

#block_right {
    position: relative;
    text-align: left;
    float:right;
    width: 10%;
    min-width:210px;
    height: auto;
    padding:  3px;
}

</style>

在高分辨率下它看起来非常好，在较低分辨率下 - 仍然需要一些调整以找到中心块大小和固定大小左\右块之间的空间的平衡

于 2013-01-30T06:15:12.503 回答
0

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

确保所有高度百分比的总和为 100%（以防你想覆盖整个屏幕）。

这可确保您的页面内容覆盖整个屏幕，而与屏幕分辨率无关。

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

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

为了解决动态大小的文章数据，只需 CSS 文章 div 有一个滚动条。

于 2013-01-29T06:06:45.393 回答