javascript - 在 Y 轴上拉伸(stretch) div 元素

Question

我有位于右下角的固定元素。然而它真的很小，我想在 Y 轴上拉伸(stretch)它以使其正常工作。

$(document).ready(function () {

    $('<div />');
    $('<div />', {
        id: 'firster',
        style: 'position: fixed; bottom: 0; right: 0; max-width: 500px;'
    }).appendTo('body');

    $('<iframe />'); // Create an iframe element
    $('<iframe />', {
        name: 'frame1',
        id: 'frame1',
        src: 'https://api.jquery.com/add/'
    }).appendTo('#firster');

});

这是到目前为止它的外观预览。粉色线条代表该 div 应该覆盖的区域。

尝试设置 width: 600px; height: 100% 在那个带有 firster id 的 div 上，但它没有用。

设置 width: 600px; 时得到的结果height: 100% 基本上是左右移动相同大小的元素。

Answer 1

当您设置 height: 100% 时在 #firster ，浏览器其实不知道什么100%意味着:它必须相对于某个父值。在这种情况下，您最好使用 top: 0和 bottom: 0在元素上。这将迫使它拉伸(stretch)到视口(viewport)的整个高度。或者你也可以使用 top: 0和 height: 100vh (100vh 表示视口(viewport)高度的 100%)，但这并没有得到广泛支持。

然后声明height: 100%在嵌套的 <iframe> 上元素。它现在将有一个合适的引用/标尺来计算 100%反对，在这种情况下，是视口(viewport)的整个高度。

$(document).ready(function () {

    $('<div />', {
        id: 'firster',
        style: 'position: fixed; top: 0; bottom: 0; right: 0; max-width: 500px;'
    }).appendTo('body');

    $('<iframe />', {
        name: 'frame1',
        id: 'frame1',
        src: 'https://api.jquery.com/add/'
    })
    .css('height', '100%')
    .appendTo('#firster');

});