我成功地实现了自动调整与device-width相关的div device-width ，但是我没有成功实现自动调整与device-height相关的div device-height 。
实际上，我有4个buttons ，其中一些在设备height 较小时不可见 。
<!-- BODY {
background: none transparent;
}
-->.btn {
position: relative;
border: 0 !important;
&:focus {
outline: 0;
}
&:hover {
top: 2px;
}
&:active {
top: 6px;
}
cursor: pointer;
-webkit-font-smoothing: antialiased;
font-weight: bold !important;
max-width: 250px;
width: 100%;
color: white;
.border-radius(10);
.transition(all, 50ms, ease);
.btn(rgb(204, 204, 204), 20%);
}
.btn(@color, @percent: 10%) {
border: 0;
text-shadow: 0px 1px 0px darken(@color, @percent);
background-color: @color;
.box-shadow(0px, 6px, 0px, darken(@color, @percent));
&:hover {
border: 0;
background-color: lighten(@color, 5%) !important;
.box-shadow(0px, 4px, 0px, darken(@color, @percent));
}
&:active {
.box-shadow(inset, 0px, 3px, 0px, darken(@color, @percent));
}
}
.position {
position: fixed;
top: 20%;
left: 0;
width: 100%;
height: 100%;
background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="position">
<button class="btn bg-primary btn-lg">PLAY</button></br>
</br>
<button class="btn bg-primary btn-lg">SIGN IN</button></br>
</br>
<button class="btn btn-lg bg-primary">SETTINGS</button></br>
</br>
<button class="btn bg-primary btn-lg">ABOUT</button></br>
</br>
</div>
注意： 我想要div是fixed 。 （不可滚动）
愿这张图片能帮助你更好地理解我的问题。
I succeeded in implementing auto adjust the width of the div related to the device-width, but I didn't succeed in implementing auto adjust the height of the div related to the device-height.
Actually, I have 4 buttons, some of them are not visible when device height is small.
<!-- BODY {
background: none transparent;
}
-->.btn {
position: relative;
border: 0 !important;
&:focus {
outline: 0;
}
&:hover {
top: 2px;
}
&:active {
top: 6px;
}
cursor: pointer;
-webkit-font-smoothing: antialiased;
font-weight: bold !important;
max-width: 250px;
width: 100%;
color: white;
.border-radius(10);
.transition(all, 50ms, ease);
.btn(rgb(204, 204, 204), 20%);
}
.btn(@color, @percent: 10%) {
border: 0;
text-shadow: 0px 1px 0px darken(@color, @percent);
background-color: @color;
.box-shadow(0px, 6px, 0px, darken(@color, @percent));
&:hover {
border: 0;
background-color: lighten(@color, 5%) !important;
.box-shadow(0px, 4px, 0px, darken(@color, @percent));
}
&:active {
.box-shadow(inset, 0px, 3px, 0px, darken(@color, @percent));
}
}
.position {
position: fixed;
top: 20%;
left: 0;
width: 100%;
height: 100%;
background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="position">
<button class="btn bg-primary btn-lg">PLAY</button></br>
</br>
<button class="btn bg-primary btn-lg">SIGN IN</button></br>
</br>
<button class="btn btn-lg bg-primary">SETTINGS</button></br>
</br>
<button class="btn bg-primary btn-lg">ABOUT</button></br>
</br>
</div>
NOTE: I want the div as fixed. (non-scrollable)
May this image help you for understanding my question better.
最满意答案
为html和body指定100％的高度（在旧浏览器中支持）：
html, body {
height: 100%;
}
或者使用vh而不是% （在较新的浏览器中支持）：
.position {
position: fixed;
top: 20vh;
left: 0;
width: 100vw;
height: 80vh;
background-color: green;
}
注意我将高度从100%更改为80vh因为如果顶部位置设置为20vh，就可以满足您的所有需求。
说明：
％-unit的意思是相对于父元素。 在你的情况下， html和body元素是你的div.position元素的父母。 但是这些元素的默认高度并不是100％。 它们的默认宽度仅为100％。 这就是为什么width: 100%适合你，而不是height: 100% 。 通过将这些元素的高度设置为100％，您应该可以获得所需的结果。
在较新的浏览器中支持的vieport宽度vw和视口高度vh单位意味着相对于视口（基本上是浏览器窗口）。 所以100vh表示：使用100％的视口高度。 在这种情况下，不需要调整html和body元素。
有关CSS单元的更多信息，请参阅： https ： //www.w3schools.com/css/css_units.asp
编辑：
要实现调整浏览器高度的按钮效果，需要进行以下调整：
...
.position {
position: fixed;
top: 20vh;
left: 0;
width: 100vw;
height: 80vh;
background-color: green;
overflow: hidden;
padding: 2vh;
}
.btn-container {
height: 18vh;
padding: 2vh;
}
.btn.btn-lg {
margin: 0;
padding: 0;
height: 14vh;
font-size: 8vh;
}
和
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="position">
<div class="btn-container">
<button class="btn bg-primary btn-lg">PLAY</button>
</div>
<div class="btn-container">
<button class="btn bg-primary btn-lg">SIGN IN</button>
</div>
<div class="btn-container">
<button class="btn btn-lg bg-primary">SETTINGS</button>
</div>
<div class="btn-container">
<button class="btn bg-primary btn-lg">ABOUT</button>
</div>
</div>
Specify a height of 100% for html and for body (supported in old Browsers):
html, body {
height: 100%;
}
or use vh instead of % (supported in newer Browsers):
.position {
position: fixed;
top: 20vh;
left: 0;
width: 100vw;
height: 80vh;
background-color: green;
}
Note I changed the height from 100% to 80vh because that's all you need, if the top position is set to 20vh.
Explanation:
The %-unit is meant to be relative to the parent element. In your case the html and body elements are the parents of your div.position element. But these elements don't have a height of 100% per default. They only have a width of 100% per default. This is why width: 100% works for you, but not height: 100%. By setting the height to 100% on these elements you should get your desired result.
The vieport width vw and viewport height vh units supported in newer browsers are meant bo be relative to the viewport (which basically is the browser window). So 100vh means: Use 100% of the viewport height. No adjustment to the html and body elements is necessary in that case.
For more information on CSS Units see: https://www.w3schools.com/css/css_units.asp
Edit:
To achieve the effect of buttons adjusting to the browser height the following adjustments are necessary:
...
.position {
position: fixed;
top: 20vh;
left: 0;
width: 100vw;
height: 80vh;
background-color: green;
overflow: hidden;
padding: 2vh;
}
.btn-container {
height: 18vh;
padding: 2vh;
}
.btn.btn-lg {
margin: 0;
padding: 0;
height: 14vh;
font-size: 8vh;
}
and
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="position">
<div class="btn-container">
<button class="btn bg-primary btn-lg">PLAY</button>
</div>
<div class="btn-container">
<button class="btn bg-primary btn-lg">SIGN IN</button>
</div>
<div class="btn-container">
<button class="btn btn-lg bg-primary">SETTINGS</button>
</div>
<div class="btn-container">
<button class="btn bg-primary btn-lg">ABOUT</button>
</div>
</div>
更多推荐
div,btn,px,电脑培训,计算机培训,IT培训"/> <meta name="description"
发布评论