-1
Я сделал боковую панель высочайшего уровня на моем загрузочном веб-сайте, но когда я изменяю размер браузера, он просто идет не так, как вы можете видеть на скриншотах ниже.Неверное изменение размера по высоте
Как я могу сделать его полной высотой при изменении размера и сохранить все в синей стороне? Большое спасибо !
HTML код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="hover-min.css" />
<link rel="stylesheet" href="main.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animate.css">
<script type="application/javascript" src="dist/js/jquery-2.1.4.min.js"></script>
<script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
<script src="script/jquery.js" type="text/javascript"></script>
<script src="background.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
<div class="row animated fadeInLeft">
<!-- -- -- -- BLUE SIDE -- -- -- -->
<div class="col-lg-1" id="blueside">
<!-- -- -- -- LOGO -- -- -- -->
<h1 class="brandlogo animated fadeInLeft">
First name <br/>
NAME <br/>
<span class="orange">
JOB <br/>
Company<br/>
</span>
</h1>
<!-- -- -- -- MENU WHY HOW WHO -- -- -- -->
<div class="brandlogo text-center animated fadeInLeft" id="menu">
<h2><a href="http://www.google.com">WHY</a></h2>
<h2><a href="http://www.google.com">HOW</a></h2>
<h2><a href="http://www.google.com">WHO</a></h2>
</div>
<!-- -- -- -- HIRE ME ITEMS-- -- -- -->
<div id="hireme" class="text-center">
<!-- -- -- -- PORTFOLIO -- -- -- -->
<h1 class="brandlogo">Portfolio</h1>
<!-- -- -- -- YELLOW DOT -- -- -- -->
<div class="puce"><!-- PUCE --></div>
<!-- -- -- -- RESUME -- -- -- -->
<h1 class="brandlogo hireMeItem">Resume</h1>
<div id="viewPDF" class="hvr-underline-from-center"><p>View PDF</p></div>
<div class="resumeBox hvr-underline-from-center"><span class="glyphicon glyphicon-download-alt resumeBoxIcon"></span></div>
<div class="resumeBox hvr-underline-from-center"><span class="glyphicon glyphicon-print resumeBoxIcon"></span></div>
<div class="resumeBox hvr-underline-from-center"><span class="glyphicon glyphicon-share-alt resumeBoxIcon"></span></div>
<!-- -- -- -- YELLOW DOT -- -- -- -->
<div class="puce"><!-- PUCE --></div>
<!-- -- -- -- CONTACT -- -- -- -->
<h1 class="brandlogo">Contact</h1>
<div id="viewPDF" class="hvr-underline-from-center"><p id="contactNumber">+336 31 94 74 90</p></div>
<div class="contactBox hvr-underline-from-center"><i id="contactIcon" class="fa fa-at"></i></div>
<div class="contactBox hvr-underline-from-center"><i id="contactIcon" class="fa fa-skype"></i></span></div>
</div> <!-- #hireme -->
</div> <!-- #blueside -->
</div> <!-- .container-fluid -->
</div> <!-- .container -->
</body>
</html>
CSS код
/* GENERAL SETTINGS*/
html,body{height:100%;}
.container-fluid, .row {
height:100%;
}
a:hover {
color : yellow;
text-decoration : none;
}
a {
text-decoration : none;
color : white;
}
/* HOMEPAGE BLUE FILTER EFFECT - not for this page */
img.nyc {
/*position:fixed;*/
left:0;
z-index:-1;
}
#opacity {
position : fixed;
background-color: #428BCA;
display:inline-block;
}
#opacity img {
opacity: 0.5;
-webkit-animation: animation 1s linear;
-moz-animation: animation 1s linear;
-ms-animation: animation 1s linear;
-o-animation: animation 1s linear;
animation: animation 1s linear;
}
@-webkit-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
@-moz-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
@-ms-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
@-o-keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
@keyframes animation{
from{
opacity: 1;
}
to{
opacity: 0.5;
}
}
#landingpage {
padding : 20px;
display: table;
position: absolute;
height: 100%;
width: 100%;
}
#logodiv {
position : absolute;
z-index : 0;
}
#rowlandingpage {
display: table-cell;
vertical-align: middle;
}
.brandlogo{
color : white;
font-family : Roboto, sans serif;
font-weight : 900;
font-size : 2em;
line-height : 22px;
margin-top : 0;
margin-bottom : 0;
}
.brandlogo h2{
color : white;
font-family : Roboto, sans serif;
font-weight : 900;
font-size : 1em;
line-height : 30px;
margin-top : 20px;
margin-bottom : 0;
}
.yellow {
color : yellow;
}
#claim{
color : white;
font-family : Roboto, sans serif;
font-weight : 900;
font-size : 4.5em;
margin-top : -100px;;
}
#singlebutton {
background-color : yellow;
color : #61A4D3;
font-family : Roboto, sans serif;
font-weight : 900;
font-size : 1.5em;
border-radius: 1px;
border-style : none;
width : 190px;
height : 50px;
}
#blueside{
width : 150px;
height:100%;
min-height:100%;
background-color: #64A5D4;
padding:10px;
color:#efefef;
box-shadow: 6px 0px 10px grey;
}
#menu {
margin-top : 50px;
}
#hireme {
margin-top : 80px;
}
.puce{
-moz-border-radius: 10px/10px;
-webkit-border-radius: 10px 10px;
border-radius: 10px/10px;
border:solid 8px yellow;
width:8px;
height:8px;
margin-left : auto;
margin-right : auto;
margin-top : 20px;
margin-bottom : 20px;
}
#viewPDF{
background-color : red;
color : #61A4D3;
font-family : Roboto, sans serif;
font-weight : 900;
font-size : 1em;
width : 110px;
height : 30px;
line-height : 30px;
margin-left : auto;
margin-right : auto;
margin-top : 5px;
}
.resumeBox {
background-color : red;
width : 34px;
height : 30px;
line-height : 30px;
margin-top : 5px;
}
.resumeBoxIcon {
color : #64A5D4;
}
#contactNumber {
font-size : 0.88em;
}
.contactBox {
background-color : red;
width : 53px;
height : 30px;
line-height : 30px;
margin-top : 5px;
}
#contactIcon {
color : #64A5D4;
font-size : 1.5em;
line-height : 30px;
height:30px;
}
Это может сделать его более удобным для пользователей, чтобы помочь вам, если вы должны были поместить свой код в демо-версии в фрагменте кода или через jsfiddle. – Joseph
jsfiffle, что OP не делал: https://jsfiddle.net/LgcL2vc3/ – Peter
Просто сделал :) >>> http://codepen.io/zaky/pen/zvqMad – Zaky