Question

我正在尝试制作textarea，以便在标题div之后占用所有剩余空格。

要求：

标题的高度可变，具体取决于内容。
Textarea必须在标题后取出所有剩余高度。
如果textarea中的内容太多，则会显示滚动条。

基本上，我试图实现这一点：http://jsfiddle.net/hLd7jc9x/，但没有高度％（因为标题的高度必须根据内容而变化，而不是固定的％）。出于同样的原因，textarea也无法定位fixed或absolute。我知道使用div很容易实现，但不知何故我无法弄清楚如何使用textarea来实现。

这是我目前的情况：http://jsfiddle.net/t5862grv/1/

Answer 1

我修改了你的fiddle。

主要解决方案是使用flexbox。为了不考虑Flexbox支持，我们使用modernizr进行检测，并添加一些基于jquery的自定义高度更新逻辑（支持窗口大小调整）。为了解释被关闭的js（这些日子比较少见），我们回到你的老式小提琴的高度造型。

CSS：

* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
#a { background: #F00; }
#b { background: #0F0; resize: none; }

/* Don't forget to use Autoprefixer or similar, so you cover all the necessary vendor prefixes based on your browser requirements. */
.flexbox body { display: flex; flex-direction: column; }
.flexbox #a { flex: 0 0 auto; }
.flexbox #b { flex: 0 1 100%; }

/* When browser doesn't support flex, i.e. IE9, use the old, less flexible styling. This can also be replaced with a JS script to manually resize the textarea height. In fact, the custom height setting is set to only be a backup if js isn't allowed. */
.no-flexbox #b { width: 100%; }
.no-js.no-flexbox #a { height: 10%; }
.no-js.no-flexbox #b { height: 90%; }

JS：

$(function(){

    // Guard.
    if (!Modernizr.flexbox) {
        return;
    }

    // Define.
    var $container = $('body');
    var $header = $('#a');
    var $textarea = $('#b');
    function updateTextArea() {
        var height = $container.innerHeight() - $header.outerHeight();
        $textarea.height(height);
    }
    var requestAnimationFrame = (
        window.requestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || 
        window.oRequestAnimationFrame
    );

    // Run.
    updateTextArea();
    $(window).resize(function(){
        requestAnimationFrame(updateTextArea);
    });

})

Textarea在标题后占用所有剩余空间

1 个答案: