标头后占用所有剩余空间的Textarea

大邱

我正在尝试制作一个textarea在header之后占用所有剩余空间的div

要求:

  • 标题的高度取决于内容。
  • Textarea必须采用标头之后的所有剩余高度。
  • 如果文本区域中的内容过多,则会出现滚动条。

基本上,我正在尝试实现此目标:http : //jsfiddle.net/hLd7jc9x/,但是没有以%为单位的高度(因为标头的高度必须根据内容而变化,而不是固定的%)。出于相同的原因,textarea也不能使用fixed定位absolute我知道这很容易实现,div但是我不知道该怎么做textarea

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

半编码

我已经修改了你的提琴

主要解决方案是使用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);
    });

})

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档