Question

我正在尝试将元素高度设置为等于视口宽度。怎么能实现这一目标？（以下面的小提琴为例）......

body{margin:0;}    
div{min-height: 100vw;}

仅当存在滚动条时才会出现高度和宽度不匹配。

我需要考虑滚动条可能存在的情况，为我的div保留 square 格式。

Answer 1

尝试：

body{
  margin:0;
  overflow:hidden;
}
div{
  background: lightblue;
  height: 100vw;
  width:100vw;
}

这将删除滚动并为div

提供相同的宽度和高度

Answer 2

你必须设置它的高度：100％;和html，身高：100％;

<div class="box"></div>

mobility.SetMobilityModel ("ns3::WaypointMobilityModel",
                        "NextWaypoint", WaypointValue(),
                        "WaypointsLeft", UintegerValue (1),
                        "LazyNotify", BooleanValue (false),
                        "InitialPositionIsWaypoint", BooleanValue (false)
                        );

mobility.Install (wifiStaNodes);  //wifiStanodes is my nodeContainer

Ptr<WaypointMobilityModel> waypoints =wifiStaNodes.Get(0)->GetObject<WaypointMobilityModel> ();

waypoints->AddWaypoint (Waypoint (Seconds (0.0), Vector (0.0, 0.0, 0.0)));
waypoints->AddWaypoint (Waypoint (Seconds (2.0), Vector (50.0, 50.0, 0)));

Answer 3

您可以使用以下javascript方法之一：

window.screen.height    
window.screen.availHeight
document.documentElement.clientHeight   
document.documentElement.offsetHeight   
document.documentElement.scrollHeight

此链接可能有用：http://ryanve.com/lab/dimensions/

Answer 4

使用元标记将此添加到您的

中

<META NAME="viewport" CONTENT="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>

和你的css

@-ms-viewport{
  width: device-width;
  height: device-height;
}

如何将元素的高度设置为100％视口宽度

4 个答案: