[英]Auto adjust height size,according to window size,and make the button fill the space
I am trying to make my site responsive, so at first I made the font size and the sticky top bar's height adjust to the window size, the result was as follows: 我试图使我的网站具有响应性,因此首先我将字体大小和顶部粘性栏的高度调整为窗口大小,结果如下:
The font size did change indeed,but went too small that at some point,i had a little space under the buttons,that wasn't filled with the button,that is something i need to fix. 字体大小确实的确发生了变化,但是太小了,到了某个时候,我在按钮下面有一点空间,那个按钮没有填充,这是我需要解决的问题。
The top bar's height isn't adjusting, maybe I did a maths miscalculation, but I need some help with it. 顶部栏的高度没有调整,也许我算错了数学,但是我需要一些帮助。
Please note that I uploaded only the useful CSS code 请注意,我仅上传了有用的CSS代码
This is my CSS: 这是我的CSS:
#bar {
display:inline-block;
width: 100%;
height: 50px;
max-height:50px;
background-color: #595959;
box-shadow: 0px 2px 2px #888888;
z-index:9999;
}
.bar-fixed {
top: 0;
z-index: 3;
position: fixed;
width: 100%;
}
#bar nav {
margin-left:50px;
margin-right:50px;
}
#bar nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #595959;
}
#bar nav ul li{
display: inline;
float: left;
}
#bar nav ul li a{
display: block;
color: #e6e6e6;
text-align: center;
padding: 16px 16px;
text-decoration: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#bar nav ul li a:hover {
background-color:black;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#bar nav ul ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #595959;
}
#bar nav ul ul li {
display: block;
float: right;
}
#bar nav ul ul li a{
display: block;
color: #e6e6e6;
text-align: center;
padding: 16px 16px;
text-decoration: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#bar nav ul ul li a:hover {
background-color:black;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
html { font-size: 90.5%; }
body {
padding: 0px;margin:0px;font-size: 1.1rem;
}
This is my HTML: 这是我的HTML:
<div class="topsec">
<div id="bar">
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<ul >
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
</ul
</nav>
</div>
<div class="wrapper">
<article class="main">
</article>
<aside class="aside LB"></aside>
<aside class="aside RB"></aside>
<footer class="footer"></footer>
</div>
This my jquery: 这是我的jQuery:
$(document).ready(function() {
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() > 59) {
$('#bar').addClass('bar-fixed');
}
if ($(window).scrollTop() < 60) {
$('#bar').removeClass('bar-fixed');
}
});
});
$(document).ready(function () {
var holdWidth = $(window).width();
var holdHeight = $(window).height();
var holdAverageSize = (holdWidth + holdHeight) / 2;
$(window).on('resize', function () {
newAverageSize = ($(window).width() + $(window).height()) / 2;
newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
$("html").css("font-size", newPercentage)
$("#bar").css("height", newPercentage) /* am pretty sure this couldn't work because i am assigning a % to a porperty i a already set with px */
console.log(newPercentage);
});
});
You need to use $(document).height()
and $(document).width()
. 您需要使用
$(document).height()
和$(document).width()
。 I think this should fix it. 我认为这应该解决它。
Concerning your second point: 关于第二点:
In the rules for '#bar' you have both height: 50px;
在“ #bar”规则中,两个
height: 50px;
均为height: 50px;
and max-height:50px;
和
max-height:50px;
(which is redundant, since height
is already fixed at 50px). (这是多余的,因为
height
已经固定为50px)。
So obviuosly somewhere you have media queries / another rule for '#bar' at another viewport width. 因此,在您有媒体查询的地方/在另一个视口宽度处使用“ #bar”的另一个规则就显得很明显了。 If that second rule includes only either
height
or min-height
(and if it's called after the rule shown in your question), this will still leave the other (not included) parameter at the value from this rule. 如果第二个规则仅包含
height
或 min-height
(并且在问题中显示的规则之后调用),则仍将另一个(未包含)参数保留为该规则的值。
EDIT: For example the responsive rule might contain max-height: 30px
, but since there's still height: 50px
in the general rule, #bar
will remain 50 pixels high. 编辑:例如,响应规则可能包含
max-height: 30px
,但是由于在常规规则中仍然有height: 50px
,因此#bar
将保持50像素高。 That could be the cause for your header not adjusting height. 这可能是标题不调整高度的原因。
So you'd have to list both of them, and for example include max-height: none;
因此,您必须将它们都列出,例如,包括
max-height: none;
or height: auto;
或
height: auto;
to "neutralize" them. 以“中和”它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.