在Y轴上拉伸div元素

Question

我有固定元素位于右下角。然而，它真的很小，我想在Y轴上拉伸它，使它按预期工作。

$(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% ID在该div上设置firster，但它不起作用。

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

Answer 1

当您在height: 100%上设置#firster时，浏览器实际上不知道100%的含义：它必须相对于某个父值。在这种情况下，最好在元素上使用top: 0和bottom: 0。这将强制它伸展到视口的整个高度。或者，您也可以使用top: 0和height: 100vh（100vh表示100％的视口高度），但这种支持不太受欢迎。

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

$(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');

});