CSS-到达超过100％高度页面时div更改位置

时间：2018-07-15 21:04:11

标签： html css height

我的主要部门有问题。 当我达到页面高度的100％以上时，以 保证金：0自动;并且所有低于div的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&amp;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>
      &copy;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;
}

1 个答案:

答案 0 :(得分：0)

我认为问题出在这里

#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;*/ /*-----------> Remove this line*/
  height: 12vh;
  border-bottom: 1px solid #DFDFDF;
  background-color: #EBEBEB;
}
相关问题
最新问题