0
我不知道爲什麼窗口大小的頁眉和頁腳大小發生變化。在調試/重寫代碼時，我發現在添加Setting（css：setting-dropdown）或Logout（css：logout-button）div時，CSS會中斷。我試圖解決它，但我無法弄清楚爲什麼設置和註銷按鈕顯示在標題寬度之外的原因以及爲什麼在添加這兩個div時頁眉和頁腳的寬度增加。窗口調整大小的CSS樣式更改
感謝您的幫助
html {
background: url("backlines.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 850px;
}
.averios-header {
\t position: absolute;
\t background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0.1, rgb(254, 254, 254)),color-stop(1, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209)));
\t left: 1px;
\t top: 0px;
\t margin: 0 auto;
\t width: 100%;
\t /*overflow: auto;*/
\t box-shadow: 0px 2px;
}
div#averios-logo{
\t width: 300px;
\t margin-left:270px;
}
div#loginHeader {
\t font-family:'Museo Slab 700';
margin-top: 360px;
margin-left: 276px;
font-size: 26px;
color: rgba(0, 173, 239, 1);
}
div#underLoginHeader {
margin-top: 50px;
margin-left: 278px;
font-size: 25px;
\t font-family: sans-serif;
}
.averios-footer {
position: absolute;
background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0, rgb(254, 254, 254)),color-stop(0, rgb(254, 254, 254)),color-stop(0.176, rgb(254, 254, 254)),color-stop(0.904, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209)));
margin-top: 812px;
width: 100%;
height: 65px;
margin-left: -7px;
overflow: auto;
}
/*div#header-hr {
\t position: absolute;
\t background: rgba(0, 173, 239, 1);
\t height: 6px;
\t width: 100%;
}*/
div#footer-hr {
\t position: absolute;
\t background: rgba(0, 173, 239, 1);
\t height: 6px;
\t width: 100%;
}
div#footer-text {
font-family: sans-serif;
font-size: 19px;
margin-top: 25px;
margin-left: 280px;
\t color: rgb(127,130,134);
}
div#forgot-password-link {
margin-top: 90px;
font-size: 23px;
text-decoration: none;
}
a {
color: rgb(127,130,134);
}
div#welcome-text {
margin-left: 276px;
font-family: 'Museo Slab 300';
font-size: 22px;
}
div#welcome-text p {
margin: 5px auto;
}
div#dropdown-pulse #dropbutton {
padding: 16px;
margin-top: 0;
margin-right: auto;
margin-left: 276px;
margin-bottom: 0;
border-radius: 50px 50px 50px 50px;
background: rgba(0, 173, 239, 1);
color: white;
width: 230px;
border: none;
font-size: 16px;
position: relative;
top: 100px;
text-align: left;
}
img#arrow {
position: relative;
top: 110px;
right: 84px;
}
img#sphere {
position: relative;
top: 116px;
right: 51px;
}
/* SETTING DROPDOWN */
div#setting-dropdown {
position: absolute;
margin-left: 1350px;
\t height: 0px;
\t display: inline-block;
}
div#setting-dropdown-content {
display: none;
background: rgba(0, 173, 239, 1);
width: 237px;
/* padding: 8px; */
position: absolute;
margin-left: -116px;
margin-top: -22px;
padding: 15px;
}
div#setting-dropdown p {
font-size: 22px;
margin-top: 44px;
font-family: 'Museo Slab 700';
}
img#setting-blue-arrow {
position: relative;
margin-left: 121px;
top: -44px;
}
div#setting-dropdown-content a {
color: white;
text-decoration: none;
/* display: none; */
font-size: 19px;
font-family: 'Museo Slab 300';
padding: 2px;
}
#setting-dropdown:hover #setting-dropdown-content {
\t display:block;
}
/* SOMETHING NEW */
div#setting-dropdown i {
display: inline-block;
padding: 5px;
padding-right: 7px;
text-align: center;
border-radius: 10px 10px 0 0;
padding-bottom: 10px;
}
div#setting-dropdown:hover i {
background-color: rgba(0, 173, 239, 1);
\t color:white;
}
div#logout-button {
position: absolute;
margin-left: 1569px;
margin-top: -90px;
border-style: none;
}
button#averios-logout {
background : rgba(255, 255, 255, 1);
border: none;
border-radius: 40px 40px 40px 40px;
width: 135px;
height: 40px;
font-size: 19px;
font-weight: 900;
font-family: 'Museo Slab 700';
}<!DOCTYPE html>
<html>
<head>
\t <title>title</title>
\t <link rel="stylesheet" type="text/css" href="averios.css">
\t <link rel="stylesheet" type="text/css" href="font-awesome.css">
\t <link rel="stylesheet" type="text/css" href="dropdown.css">
\t <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
\t
<meta charset="utf-8">
</head>
<body>
<div class="averios-header">
\t <div id="setting-dropdown">
\t \t <!-- SETTING DROPDOWN WILL GO HERE -->
\t \t <p> SETTINGS <i class="ion-chevron-down"></i></p>
\t \t <div id="setting-dropdown-content">
\t \t \t <a href="#">Change Password</a>
\t \t \t <a href="#">Change Security Settings</a>
\t \t </div>
\t </div>
\t <div id="averios-logo">
\t \t <img src="averioslogo.png" width="176" height="129">
\t </div>
\t <div id="logout-button">
\t \t <button id="averios-logout"> LOGOUT </button>
\t </div>
</div>
<footer class="averios-footer">
<div id="footer-hr">
</div>
\t <div id="footer-text">
\t \t © 2016, All Rights Reserved.
\t </div>
</footer>
</body>
</html>
請檢查此鏈接：-http：//www.w3schools.com/jsref/tryit.asp名= tryjsref_win_resizeto –
@Raziasultana我不想寫一個腳本然而，我想看看我的CSS有什麼問題 – Maddy