创建表格布局

Question

我有一个粘性页脚的页面。在页面中是textarea +一个提交按钮。我希望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

您遇到的问题是您需要考虑标题，按钮和复选框的高度。如果您能够在表单上使用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 2

如果我了解你的意思，可以使用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 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填写表格的剩余空间。

让我说一下“布局语言”;您希望页脚作为静态元素位于底部。 页脚的静态高度。您希望标题始终位于标题具有自动高度的顶部，具体取决于内容您希望表单填充剩余空间。表格的文本区域填写表格的剩余空间。

创建表格布局

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

<强> HTML

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

<强>的CSS

body > div {
    display: table-row;
}

使用direct child selector将身体直接子项（#header，#content和#footer）的所有div元素转换为表格 - 行。

你的身体会像桌子一样：

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

使用

box-sizing是因为bootstrap在主体上使用填充。这可以防止在为主体指定填充时主体扩展。

获取剩余空间

现在您希望#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

随意提出有关此方法的问题。

Answer 8

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

首先，将textarea设置为position：absolute，然后通过页眉和页脚（+ checkbox / submit）高度偏移顶部和底部。这将确保它按比例缩放。

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

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;

}

粘性页脚+ textarea高度百分比

8 个答案:

创建表格布局

获取剩余空间

第二个表格布局

jsFiddle

With full table tags