Javascript 在Y轴上拉伸div元素

我有一个固定元素，它位于右下角。但是它确实很小，我想在

Y

轴上拉伸它，使其正常工作。

$（文档）.ready（函数（）{
$('');
$('', {
id:'第一'，
样式：“位置：固定；底部：0；右侧：0；最大宽度：500px；”
}).附于（“主体”）；
$（“”）；//创建一个iframe元素
$('', {
名称：'frame1'，
id:'frame1'，
src:'https://api.jquery.com/add/'
}).appendTo（“#firster”）；
});

下面是到目前为止的预览。粉色线表示该div应覆盖的区域

尝试设置

宽度：600px；高度：100%

在id第一的div上，但它不起作用。

---

当我设置

width:600px时得到的结果；高度：100%

基本上是将相同大小的元素左右移动。

当您将

高度：100%

设置为

#first

时，浏览器实际上不知道

100%

的含义：它必须相对于某个父值。在这种情况下，最好在元素上使用

top:0

和

bottom:0

。这将迫使它拉伸到视口的整个高度。或者，您也可以使用

top:0

和

height:100vh

（

100vh

表示视口高度的100%），但这不太受广泛支持

然后在嵌套的

元素上声明

高度：100%

。现在它将有一个适当的参考/标尺来计算

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

});

$（文档）.ready（函数（）{
$('', {
id:'第一'，
样式：“位置：固定；顶部：0；底部：0；右侧：0；最大宽度：500px；”
}).附于（“主体”）；
$('', {
名称：'frame1'，
id:'frame1'，
src:'https://api.jquery.com/add/'
})
.css（“高度”、“100%”）
.appendTo（“#firster”）；
});

您是否尝试过设置

宽度：100%；身高：100%在iframe上？@JeromeIndefenzo我没有。只关注div部分：）
$(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');

});