如果内容超出容器大小且没有固定大小，则显示滚动条

Question

I have a masterpage that looks like this: 我有一个主页，看起来像这样：

<body id="body" runat="server" style="padding: 0px 25px 25px 25px;">
<div class="wrapper">
    <form id="form1" runat="server">
    <uc1:Header ID="header" runat="server" />
    <div style="width: 100%;" class="borderContent">
        <div style="float: left; margin: 20px 0px 20px 20px;">
            <uc2:MenuLeft ID="menuLeft" runat="server" />
        </div>
        <div style="width: 80%; float: left; margin: 20px;">
            <asp:ContentPlaceHolder ID="content" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="push">
        </div>
        <div style="clear: both;">
        </div>
    </div>
    </form>
</div>
<div class="footer">
    <p>
        Copyright (c) 2012</p>
</div>

In the content place holder I have a table with two rows, one is a header, the other one is the content. 在内容占位符中，我有一个包含两行的表，一个是标题，另一个是内容。 I would like to keep the footer in place and the content in place and with scrollbars if the content is longer than the height of the screen, but without saying how big the container is (I would like it to keep it's ratio regardless of the size of the monitor). 如果内容的长度大于屏幕的高度，我想保留页脚和内容，并使用滚动条，但不要说容器有多大（无论大小如何，我都希望保持其比例）显示器）。 So maybe it can be done somehow with percents? 那么也许可以用百分比完成它吗？

Thanks 谢谢

Answer 1

You could use 你可以用

position: absolute;

on your footer and content, and then for your footer do 在页脚和内容上，然后为页脚做

bottom: 0px;
height: 100px;

and then for the content do 然后为内容做

bottom: 100px;
overflow: auto;

Which will keep the footer at the bottom of the page and the content will be above it, no matter how the page is resized. 无论页面如何调整大小，都将使页脚位于页面底部，内容位于页面上方。

This of course is just a guideline, you'll have to play with it to make it look like you want. 当然，这只是一个准则，您必须使用它才能使其看起来像您想要的。

Answer 2

I have done something like this before, you could put some JS/jQuery on the load of the page. 之前我已经做过类似的事情，您可以在页面负载上添加一些JS / jQuery。 Basically you will want to: 基本上，您将需要：

Calculate the max-height of the container based on % of page, or fixed amount if you prefer. 根据页面的百分比计算容器的最大高度，或者根据您的喜好计算固定的高度。
Append the data to the contianer 将数据追加到容器
Determine if the container is now greater than the value retrieved in step 1. 确定容器现在是否大于在步骤1中检索的值。
If the container is greater than the content, add 'overflow-y: scroll' to the element's style 如果容器大于内容，则在元素的样式中添加“ overflow -y：scroll”
Else, leave as be. 否则，就这样吧。

如果内容超出容器大小且没有固定大小，则显示滚动条

问题描述

2 个解决方案

解决方案1
0 2012-11-15 14:14:03

解决方案2
0 2012-11-15 17:37:29

如果内容超出容器大小且没有固定大小，则显示滚动条

问题描述

2 个解决方案

解决方案1 0 2012-11-15 14:14:03

解决方案2 0 2012-11-15 17:37:29

解决方案1
0 2012-11-15 14:14:03

解决方案2
0 2012-11-15 17:37:29