Question

＆lt; 3 ..我的页面上需要一些帮助..如果我在页面顶部和页面底部有一个固定的div，我会看到我的所有数据。当我调整页面高度时，底部部分没有正确显示.. sample

<div id="page-container" class="">

     <!------------ content ------------>
     <div id="content" class="">

                <div class="clear"></div>
                <div class="topbox"> 
                <img id="user_image" class="user_image" src="" width="45" height="45"/>
                <span class="nickname" id="nickname"></span>
                </div>
                <div class="message" id="message_container">
                    <div class="messagechat">
                    <ul id="message_area">   
                        somelong data here
                    </ul>
                    </div>

                </div>


                <div class="chatbox">
                    <a href="#" class="pixbtn alignleft"></a>
                    <div class="chat alignleft">
                    <input type="text" name="user" class="text" id="input_area">
                    </div>
                    <a href="javascript:;" class="sendbtn alignright" id="button_send"></a>
                </div>


    </div>

Answer 1

我在这里纠正了你的问题：http://jsfiddle.net/c26zd/2/

如果您需要在灰色背景（顶部和底部）与内容之间留出一些余量，只需添加例如

#content {
    margin: 10px auto;
}

Answer 2

我认为最好的方法是你可以用jQuery控制页面的高度，换句话说，当页面的高度小于例如200px时，div（顶部和底部）都被最小化（折叠），现在你应该定义鼠标悬停时的鼠标悬停事件，当鼠标结束时，它是初始大小（展开）所以在这种状态下，即使页面高度最小，数据也会显示得更好，你应该检查调整大小事件的高度

$( window ).resize(function() {
  //do something
});

固定顶部和底部的div

2 个答案: