我有位于右下角的固定元素。然而它真的很小,我想在 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%
基本上是左右移动相同大小的元素。
最佳答案
当您设置 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');
});
关于javascript - 在 Y 轴上拉伸(stretch) div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47701020/