粘性页脚 + 文本区域高度（百分比）

Question

我有一个带有粘性页脚的页面。页面中有一个文本区域+一个提交按钮。我希望 textarea 的高度适应浏览器窗口的高度，并且按钮始终位于 textarea 的正下方，几乎触及页脚。

这是我的小提琴：http://jsfiddle.net/7r8zK/3/。代码：

<!-- Part 1: Wrap all page content here -->
<div id="wrap">
    <!-- Begin page content -->
    <div class="container">
        <div class="page-header">
             <h1>
        Header
      </h1>

        </div>
    </div>

    <form>
        <fieldset>
            <textarea>Hello, world</textarea>
            <label class="checkbox">
                <input type="checkbox" />Check me out</label>
            <button type="submit" class="btn">Submit</button>
        </fieldset>
    </form>

    <div id="push"></div>
</div>
<div id="footer">
    <div class="container">
        <p>Footer</p>
    </div>
</div>

我不确定如何处理表单，以便 textarea 的高度根据窗口的高度进行调整。这可能只与 CSS（没有 JS）有关吗？

Answer 1

如果我了解您的目的，您可以像这样使用css calc()：

Working Example

html, body {
    height: 100%;
}
#wrap {
    height:100%;
    max-height:100%;
    margin: 0 auto;
}
#footer {
    height: 40px;
}
form {
    min-height:100px;
    height: calc(100% - 180px);
}
fieldset, textarea {
    height: calc(100% - 40px);
}

我还从 html 中删除了 <div id="push"></div>，因为它似乎没有任何用途...

Answer 2

您遇到的问题是您需要考虑标题、按钮和复选框的高度。如果您能够在表单上使用 height: calc(100% - footer height - header height - vertical margins) 并在 textarea 上使用 height: calc(100% - button height - checkbox height - vertical margins)，我只能看到这项工作。

在这种情况下，您需要知道或设置这些元素的高度和边距。我还在所有元素中添加了box-sizing: border-box;，以便在计算大小时考虑填充。您需要在计算中考虑垂直边距。

检查一下： DEMO 使用来自 http://css-tricks.com/snippets/css/sticky-footer/ 的粘性页脚

我也从 html 中删除了 push div。

* {
    margin: 0;
    box-sizing: border-box;
}
 html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}
#wrap {
    height:100%;
    margin: 0;
}
#wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -100px; 
}
#wrap:after {
  content: "";
  display: block;
}
#footer, #wrap:after {
  /* .push must be the same height as footer */
  height: 100px; 
}
#footer {
    background: #999999;
}
#wrap > .container {
    height: 100px;
    background: #ccc;
}

.btn, .check-box {
    height: 20px;
}

#wrap form {
    height: calc(100% - 200px); /* 200px = height of header and footer */
}
#wrap form > fieldset {
    height: 100%;
}
#wrap > form > fieldset > textarea {
    height: calc(100% - 55px); /* 55px = height of .btn and .checkbox, vertical margin of .checkbox and textarea */
}

Answer 3

对不起，内联代码，但这可以解决问题。

        </div>
    </div>

    <form>
        <fieldset>
            <textarea style="height:100%;width:100%" cols="100%" rows="100%">Hello, world</textarea>
            <label class="checkbox">
                <input type="checkbox" />Check me out</label>
            <button type="submit" class="btn" style="float:right;">Submit</button>
        </fieldset>
    </form>

    <div id="push"></div>
</div>
<div id="footer">
    <div class="container">
        <p>Footer</p>
    </div>
</div>


#wrap {margin: 0 auto -40px;}
#push, #footer {height: 40px;}

Answer 4

您已经为页脚 DIV 提供了 40px 的高度，因此您必须将页脚内 P 标签的边距、填充属性应用到 0 值，或者必须增加页脚的高度，这与我提到的 CSS 一致（您的HTML 结构）。

这是我的 CSS：

html, body {
  height: 100%; 
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding:0;
 /* The html and body elements cannot have any padding or margin. */
}

#wrap {
  height: auto !important;
  height:100%;
  margin: 0 auto -40px;
  min-height: 100%;
  position:relative;    
}

.container:after {
  clear: both;
}
.container:before, .container:after {
  content: "";
   display: table;
  line-height: 0;
}
#push, #footer {
 height: 40px;
}

fieldset { height:85%; width:98%; margin:0; padding:0; position:absolute;  }
textarea {  width:96%; height:86%; margin:1%; }

#footer{ background:#f2f2f2; }
#footer p { margin:0; padding:0;}

Answer 5

检查这个小提琴你的答案..Fiddle Here..

var height = window.innerHeight;
$(document).ready(function ()
{
    var eheight = $(".page-header").height();
    $("#txt").css("height",height - eheight -90);// Here 90 resembles the height of checkbox, button and footer..
});

Answer 6

据我了解，您想根据输入的数据调整文本框，但您不希望高度超过窗口高度，直到它正好在页脚按钮上方，如果这是正确的，那么我已经使用这里的代码：

https://raw.github.com/jackmoore/autosize/master/jquery.autosize.min.js

同时将最大高度设置为 180%（这可以根据您使用的屏幕进行调整，因为我使用的是我的笔记本电脑屏幕）

在这里检查小提琴：

    textarea
{
    max-height:180%;
}

http://jsfiddle.net/7r8zK/89/

Answer 7

假设您要求一个响应式文本区域填充窗口的高度，它实际上相当简单。

首先，将 textarea 设置为 position:absolute，然后将顶部和底部偏移页眉和页脚（+ 复选框/提交）高度。这将确保它按比例缩放。

然后将您的复选框和页脚设置为从底部的绝对偏移量，您就完成了。

http://jsfiddle.net/7r8zK/101/

<form>
    <fieldset>
        <textarea id="textarea">Hello, world</textarea>
        <div id="inputs">
        <label class="checkbox">
            <input type="checkbox" />Check me out</label>
        <button type="submit" class="btn">Submit</button>
        </div>
    </fieldset>
</form>

#textarea {

    position:absolute;
    top:100px;
    bottom:120px;
}

#inputs {
    position:absolute;
    bottom:50px;

}

Answer 8

让我用简单的英语表达你的问题； 您希望页脚始终位于屏幕底部。您希望 textarea 填充表单剩余空间的位置。

让我用更多的“布局语言”来表述它；您希望页脚作为静态元素位于底部。 页脚有一个静态高度。根据内容，您希望标题始终位于标题具有自动高度的顶部。
你希望你的表格填满剩余的空间。表单的文本区域填充表单的剩余空间。

---

创建表格布局

对此的基本挑战是一个元素的高度未知（标题）。我能想到的一种方法是使用表格布局。您的不同部分（页眉、表单和页脚）代表不同的表格行：

HTML

<div class="header">
   ...
</div>
<div id="content">
   ...
</div>
<div id="footer">
   ...  
</div>

CSS

body > div {
    display: table-row;
}

direct child selector 用于将作为 body 的直接子元素（#header、#content 和 #footer）的所有 div 元素转换为表格行。

您的身体将充当桌子：

body 
{
    display: table;
    width: 100%;
    box-sizing: border-box;
}

box-sizing 被使用是因为 bootstrap 在 body 上使用了 padding。这可以防止在将填充分配给主体时主体膨胀。

获取剩余空间

现在您希望#content（包含表单）填充剩余的高度。因为您使用了表格布局，所以您可以使用：

#content {
    height: 100%;
}

这将自动动态填充剩余空间。

按钮的html注意事项
元素<button> 不支持type=submit 属性，如果要使用此属性，则需要使用<input>。或者您可以删除该属性并使用<button> 元素。

第二个表格布局

由于与textarea高度原则相同，所以可以在另一个表格布局里面再创建一个表格布局：

<div id="content">
    <form>
        <fieldset>
            <table id="formTable">
                <tr>
                    <td><textarea>Hello, world</textarea></td>
                </tr>
                <tr>
                    <td>
                        <label class="checkbox">
                            <input type="checkbox" />Check me out
                        </label>
                    </td>
                </tr>
                <tr>
                     <td>
                         <input type="submit" class="btn" />
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>
</div>

请注意，我为此使用了普通的 html 表格标签。您也可以将这些元素用于之前的表格布局。但这取决于您是否更想要现在拥有的 html。

jsFiddle

With full table tags

请注意，我在主体上使用了min-height: 300px;，因此元素不会因屏幕太小而相互重叠。如果你想支持这个，你可以使用一个新的媒体查询来解决这个问题。

更多信息为何采用这种方法
这种方法不使用任何修复或手动计算。您将按照它应该工作的方式使用表格。

calc() 也没有得到广泛支持，因为表格元素是 HTML 的基本构造：http://caniuse.com/calc

---

请随时询问有关此方法的问题。