0
ヘッダーとフッターのサイズがウィンドウのサイズ変更の理由を知りません。コードのデバッグ/書き換えで、Setting（css：setting-dropdown）またはLogout（CSS：ログアウトボタン）divを追加すると、CSSが破損することが判明しました。私はそれを修正しようとしましたが、ヘッダーの幅の外に設定とログアウトのボタンが表示され、ヘッダーとフッターの幅が2つの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