4

我有一个带有粘性页脚的页面。页面中有一个文本区域+一个提交按钮。我希望 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）有关吗？

4

8 回答 8

3

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

工作示例

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);
}

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

于 2013-11-24T02:10:50.260 回答
3

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

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

看看这个： 使用来自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 */
}
于 2013-11-18T23:25:21.460 回答
0

您已经为页脚 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;}
于 2013-11-22T06:41:27.227 回答
0

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

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

创建表格布局

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

html

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

CSS

body > div {
    display: table-row;
}

直接子选择器用于将作为 body( 和 ) 的直接子元素的所有 div 元素#header转换#content为表格#footer行。

您的身体将充当桌子的位置：

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

带有完整的表格标签

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

附加信息 为什么这种方法
这种方法不使用任何修复或手动计算。您将使用一张桌子，因为它应该可以工作。

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

随意询问有关此方法的问题。

于 2013-11-25T13:36:42.967 回答
0

检查这个小提琴你的答案..小提琴在这里..

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..
});
于 2013-11-22T12:50:42.657 回答
0

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

首先，将您的 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;

}
于 2013-11-25T18:13:36.780 回答
0

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

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

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

在这里检查小提琴：

    textarea
{
    max-height:180%;
}

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

于 2013-11-24T03:11:18.683 回答
0

很抱歉内联代码，但这可以解决问题。 

        </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;}
于 2013-11-18T23:40:16.040 回答