CSS - div在页面高度超过100%时更改位置
CSS - div在页面高度超过100%时更改位置
提问于 2018-07-16 05:04:11
我的主div有问题。当我达到页面高度的100%以上时，以页边距为中心的div :0会自动；并且下面的所有div(例如页脚)几乎不会向左侧移动。我在互联网上搜索了很多次，但没有找到正确的答案。
一些屏幕截图我正在谈论的Here is OK
但是当我在列表中打开一些类别时，页面的高度超过了100%，Here is not OK就出了问题
我的HTML：
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Setup Serwis - kasy fiskalne Inowrocław</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<!-- START Górny panel -->
<div id="top-bar">
<div id="top-content">
<div id="logo">
<!-- <a href="index.php"><img src="img/logo.png" alt="Setup Serwis"></a> -->
LOGO<br>HERE
</div>
<nav>
<ul id="top-nav">
<li>Strona główna</li>
<li>O firmie</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
</div>
<!-- END Górny panel -->
<!-- START Główny kontent -->
<main>
<section id="left-categories">
<h3>Kategorie</h3>
<ul>
<li>
Kasy fiskalne
<ul>
<li>Kasy przenośne</li>
<li>Kasy małe</li>
<li>Kasy średnie</li>
<li>Kasy systemowe</li>
</ul>
</li>
<li>
Drukarki fiskalne
<ul>
<li>Drukarki przenośne</li>
<li>Drukarki biletowe</li>
<li>Drukarki sklepowe</li>
<li>Drukarki apteczne</li>
</ul>
</li>
<li>
Oprogramowanie
<ul>
<li>Handel</li>
<li>Księgowość</li>
<li>Gastronomia</li>
<li>Hotel</li>
</ul>
</li>
<li>Skanery kodów kreskowych</li>
<li>Weryfikatory cen</li>
<li>Wagi elektroniczne</li>
<li>Drukarki etykiet</li>
<li>Drukarki paragonowe</li>
<li>Ekrany dotykowe</li>
<li>Kolektory danych</li>
<li>Zestawy</li>
<li>Terminale komputerowe</li>
<li>Terminale płatnicze</li>
<li>Akcesoria</li>
<li>Szuflady</li>
</ul>
</section>
</main>
<!-- END Główny kontent -->
<!-- START Stopka -->
<footer>
<p><span style="color: #2663DE; font-weight: 600;">NAZWA</span> <span style="color: #FD0A0A; font-weight: 600;">FIRMY</span> <br>
©2018 Wszelkie prawa zastrzeżone<br>
<span style="font-size: 1.3rem; opacity: 0.3;">Projekt i wykonanie:</span></p>
</footer>
<!-- END Stopka -->
</body>
</html>我的CSS：
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
height: 100%;
}
body {
width: 100%;
height: 100%;
/* margin: auto 0 !important; */
/* margin-top: 0; */
/* padding: 0; */
background-image: url('../img/dust_scratches.png');
font-family: 'Nunito', sans-serif;
overflow-x: hidden;
}
main {
margin-left: auto;
margin-right: auto;
width: 70vw;
height: 80vh;
border-left: 1px solid black;
border-right: 1px solid black;
/* background-color: blue; */
}
footer {
width: 100%;
height: 8vh;
background-color: #EBEBEB;
border-top: 1px solid #DFDFDF;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: table;
}
footer p {
display: table-cell;
vertical-align: middle;
font-size: 1.4rem;
text-align: center;
}
#top-bar {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
width: 100vw;
height: 12vh;
border-bottom: 1px solid #DFDFDF;
background-color: #EBEBEB;
}
#top-content {
margin-left: auto;
margin-right: auto;
width: 70vw;
height: 12vh;
}
#logo {
width: 220px;
height: 12vh;
font-size: 3rem;
text-align: center;
float: left;
background-color: blue;
}
#logo img {
width: 220px;
height: 110px;
}
#top-nav {
display: inline-block;
margin-top: 9vh;
}
#top-nav > li {
display: inline-block;
font-size: 2rem;
margin-left: 20px;
}
#left-categories {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
width: 220px;
padding-top: 20px;
}
#left-categories h3 {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
font-size: 2.2rem;
background-color: #2B78EC;
width: 220px;
text-align: center;
padding: 5px;
color: #F5F5F5;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #2261C0;
}
#left-categories ul {
font-size: 1.5rem;
list-style: none;
width: 220px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.27);
-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.27);
box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.27);
}
#left-categories ul li {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding: 5px 5px 5px 15px;
border-bottom: 1px solid #B5B5B5;
border-left: 1px solid #B5B5B5;
border-right: 1px solid #B5B5B5;
background: #fff url('../img/menu_bg.png') 5px 12px no-repeat;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: #373737;
}
#left-categories ul li:hover {
background-color: #EBEBEB;
}
#left-categories ul li ul {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
width: 203px;
}
#left-categories ul li ul li {
border: 0px;
font-size: 1.4rem;
display: none;
background-color: #EBEBEB;
}
#left-categories ul li ul li:hover {
background-color: #fff;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51352208
复制相关文章
相似问题