粘贴页脚+ textarea高度（以百分比表示） [英] Sticky footer + textarea height in percentage

问题描述

我有一个页面有一个粘性页脚。在页面是一个textarea +一个提交按钮。我想要textarea的高度调整到浏览器的窗口的高度和按钮总是在textarea正下方，几乎触及页脚。

I have a page that has a sticky footer. In the page is a textarea + a submit button. I want the textarea's height to adjust to the height of the browser's window and the button to always be right below the textarea, almost touching the footer.

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

Here's my fiddle: http://jsfiddle.net/7r8zK/3/. The code:

<!-- 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）吗？

I'm not sure what to do to the form so that the textarea's height adjusts according to the window's height. Is this possible to do with just CSS (no JS)?

推荐答案

你遇到的问题是，帐户的高度，标题，按钮和复选框。我只能看到这个工作，如果你能够使用 height：calc（100％ - 页脚高度 - 页眉高度 - 垂直边距）在表单和 height：calc（100％ - 按钮高度 - 复选框高度 - 垂直边距）

The issue you are running into is you need to take into account the height of the header, button, and checkbox. I can only see this working if you are able to use height: calc(100% - footer height - header height - vertical margins) on the form and height: calc(100% - button height - checkbox height - vertical margins) on the textarea.

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

In this case, you need to know or set the height and margins on those elements. I also added box-sizing: border-box; to all elements to take into account padding when calculating size. You will need to account for vertical margins in your calculations.

查看：
DEMO 使用 http://css-tricks.com/snippets/css/sticky-footer/

我从html中移除了push div

I removed the push div from the html also.

* {
    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 */
}

这篇关于粘贴页脚+ textarea高度（以百分比表示）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！