当前位置: 首页 > 面试题库 >

高度等于视口的正方形DIV

卫高谊
2023-03-14
问题内容

我需要创建一个DIV,其中width=height,与height=100%视口(其中,很明显,是变量)。

换句话说,一个完美的正方形DIV 根据视口的高度 计算其尺寸。该DIV中的元素的尺寸将作为父DIV的高度和宽度的百分比。

在我看来,这 在CSS中 应该很简单,但是我已经受够了!任何指针将不胜感激。


问题答案:

您可以使用jquery(如果愿意,也可以使用纯JavaScript)进行此操作。

使用jQuery:

<div id="square">
</div>

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});


 类似资料:
  • 问题内容: 我正在尝试创建一个画布元素,该元素占用视口宽度和高度的100%。 您可以在我的示例中看到这种情况的发生,但是它正在Chrome和FireFox中添加滚动条。如何防止多余的滚动条,仅将窗口的宽度和高度精确设置为画布的大小? 问题答案: 为了始终使画布全屏显示宽度和高度,这意味着即使调整了浏览器的大小,也需要在将画布调整为window.innerHeight和window.innerWid

  • 我正在工作的bx滑块jquery插件。有时视口高度设置不正确。这将发生时,滑块是加载第一次。如果我单击next或prev按钮,一旦视口设置正确。我也检查了bxslider.js,它也返回了错误的值。这表明只有一个子(图像),但我使用了5个图像。我设置宽度为250 px,但它返回953px..下面的插件是我使用的。 https://cdnjs.cloudflare.com/ajax/libs/bxs

  • 问题内容: 如何在ReactJS中获得视口高度?在普通的JavaScript中,我使用 但是使用ReactJS,我不确定如何获取此信息。我的理解是 仅适用于创建的组件。但是,对于or 元素而言并非如此,这可能会给我窗口的高度。 问题答案: 设置道具 视口高度现在可以在渲染模板中用作{this.state.height}

  • 最近我一直在研究自动布局,我被一个看似微不足道的问题所困扰。我有一个想法,我想坐在屏幕的顶部,占据屏幕高度的一半。自动布局之前简单-只需将其固定到位,并告诉它在superview调整大小时垂直展开即可。 现在,我一辈子都不知道该怎么做。以下是我尝试设置时得到的结果: 底部空间约束设置为“等于284”,当我切换到iPhone4布局时,这对我来说绝对没有用,因为它在屏幕底部保留了284个点的空间,并将

  • 场景- > TableView高度是使用纵横比相对于superview的高度动态设置的。 TableViewCell的高度是根据表格视图的高度计算的: 问题 - 最初在委托方法中没有正确计算表格视图高度。但在滚动单元格后正确计算。 尝试的解决方案: 在视图中重新加载。 调用 在单元格中进行. 有什么方法可以正确计算出这个表格的高度吗?

  • 我会保持简短直截了当,这样我就明白了: > vw根据视区宽度更改字体大小。 VH根据视区高度更改字体大小。 我的问题是; 有没有一种方法可以根据视区的宽度和高度来缩放我的字体大小?因此,改变浏览器的高度和宽度将适当地缩放我的字体大小。 我这样问是因为我想根据它们所在的容器适当地缩放我的文本大小,我的问题是容器缩放到100%的宽度和100%的高度。因此,根据高度和宽度来缩放文本大小似乎是合乎逻辑的,