当前位置：文江博客话题详情

根据视口高度动态设置DIV高度

发布于 2024-11-18 01:28:24 字数 162 浏览 0 评论 0原文

我正在尝试将 div 的高度设置为视口高度的 30%，并且我非常希望在视口高度发生变化时对其进行缩放。

我尝试设置 min-height: 30%; height:30% 但它不起作用。

我看了一下JQuery的height();但我就是不知道如何开始。

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我ぃ本無心為│何有愛 2024-11-25 01:28:24

function thirty_pc() {
    var height = $(window).height();
    var thirtypc = (30 * height) / 100;
    thirtypc = parseInt(thirtypc) + 'px';
    $("div").css('height',thirtypc);
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

function thirty_pc() {
    var height = $(window).height();
    var thirtypc = (30 * height) / 100;
    thirtypc = parseInt(thirtypc) + 'px';
    $("div").css('height',thirtypc);
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

回复收藏 0 原文

唔猫 2024-11-25 01:28:24

这基本上是利亚姆·贝利的答案，但使用三十个人卡（）应该更快，更简洁：

function thirty_pc() {
    $("div").css('height', '' + Math.round(.3 * window.height()));
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

如果你喜欢它，请仍然接受利亚姆的答案，但支持我的。 :)

This is basically Liam Bailey's answer, but with a thirty_pc() that should be both faster and more concise:

function thirty_pc() {
    $("div").css('height', '' + Math.round(.3 * window.height()));
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

If you like it, please still accept Liam's, but upvote mine. :)

回复收藏 0 原文

不语却知心 2024-11-25 01:28:24

window.onresize=function(){
    $("#selectedDiv").height( ($(window).height()*.3) );
}

window.onresize=function(){
    $("#selectedDiv").height( ($(window).height()*.3) );
}

回复收藏 0 原文

爱的故事 2024-11-25 01:28:24

对于使用 Jquery 具有此类的任何 div、部分的视口高度，此方法 100% 有效。
使用附加功能调整高度为30%，目前是100%，如果喜欢请推广。

function thirty_pc() {
    $(".introduction").css({'height':($(window).height())+'px'});
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

This one works 100% for viewport height of any div, section that has this class using Jquery.
Use additional function to adjust height to 30% currently it is 100% please promote if you like it.

function thirty_pc() {
    $(".introduction").css({'height':($(window).height())+'px'});
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

回复收藏 0 原文

~没有更多了~