Question

当我最小化屏幕宽度时，我想知道如何阻止div落在导航/信息栏下面。信息栏的高度为1200px，当我决定最小化宽度时，我只是希望它位于左侧而不会受到div和其他代码的干扰。

或者更好的是，如果有人可以告诉我如何在浏览器最小化的同时缩小“信息栏”的高度，而div在其下面则会非常有用。

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href=o>
    <link href="https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Amaranth|Arapey|Armata|Asap+Condensed|Bellefair|Cabin+Condensed|Cormorant+Unicase|Cormorant+Upright|Dancing+Script|EB+Garamond|Economica|Frank+Ruhl+Libre|Great+Vibes|Gruppo|Gudea|Halant|Heebo|Hind+Guntur|IM+Fell+Great+Primer+SC|Italianno|Karla|Kreon|Kristi|Kurale|Molengo|Old+Standard+TT|Open+Sans+Condensed:300|Ovo|Parisienne|Pinyon+Script|Poiret+One|Pontano+Sans|Prata|Quattrocento|Rouge+Script|Share|Spectral|Tangerine|Tenali+Ramakrishna|Trirong|Voces|Yantramanav|Yrsa" rel="stylesheet">
    <title></title>
</head>

<body>
    <h1>Site</h1>
        <nav>
    <ul class="menu">
        <li>Information</li>
        <li>Wanting</li>
        <li>To</li>
        <li>Stay</li>
        <li>Undisruptive</li>
        <li>To</li>
        <li>Div's</li>
    </ul>
        </nav>

<div>
    <div class=red>
    </div>
    <div class=red>
    </div>
    <div class=red>
    </div>
    </div>
</body>
</html>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    text-align:center;
    font-family
}

h1{
    background-color:black;
    color:white;
    padding:1em;
    font-size:2em;
}

.menu{
    background-color:gray;
    width:200px;
    height:1200px;
    position:relative;
    float:left;

}

.red{
    position:relative;
    border:1px solid red;
    float:left;
    width:350px;
    height:350px;
}

@media screen and (min-width:600px){
    .red{

    }
}

Answer 1

这可能有帮助：

您可以将宽度更改为“％”

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
  font-family
}

h1 {
  background-color: black;
  color: white;
  padding: 1em;
  font-size: 2em;
}

.menu {
  background-color: gray;
  width: 25%;
  height: 1200px;
  position: relative;
  float: left;
}

.right {
  float: left;
  width: 75%
}

.red {
  position: relative;
  border: 1px solid red;
  float: left;
  width: 100%;
  height: 350px;
}

@media (max-width:600px) {
.menu {
  width: 35%;
}
.right {
  width: 65%
}
}

<h1>Site</h1>
<nav>
  <ul class="menu">
    <li>Information</li>
    <li>Wanting</li>
    <li>To</li>
    <li>Stay</li>
    <li>Undisruptive</li>
    <li>To</li>
    <li>Div's</li>
  </ul>
</nav>

<div class="right">
  <div class=red>
  </div>
  <div class=red>
  </div>
  <div class=red>
  </div>
</div>

Answer 2

我想说，你的代码处于一个非常基本的水平，可以实现你的要求，但我已经尝试了一些东西，希望能满足要求。

<div class="site-name">
  <h1>Site</h1>
  <div class="hamburger" id="hamClick">
   <span></span>
   <span></span>
   <span></span>
  </div>
</div>
<nav>
  <ul class="menu" id="menu">
    <li>Information</li>
    <li>Wanting</li>
    <li>To</li>
    <li>Stay</li>
    <li>Undisruptive</li>
    <li>To</li>
    <li>Div's</li>
  </ul>
</nav>

<div>
 <div class=red></div>
 <div class=red></div>
 <div class=red></div>
</div>

这是css：

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  text-align:center;
}

.site-name {
  padding: 1em;
  position: relative;
  background-color:black;
}
.site-name h1{
  color:white;
  font-size:2em;
}

.menu{
  background-color:gray;
  width:200px;
  height:1200px;
  position:relative;
  float:left;
}

.red{
  position:relative;
  border:1px solid red;
  float:left;
  width:350px;
  height:350px;
}
.hamburger {
  display: none;
  position: absolute;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 4px;
  top: 20px;
  cursor: pointer;
}
.hamburger span {
  width: 20px;
  height: 2px;
  background: #fff;
  margin-top: 2px;
  display: block;
}
.hamburger span:first-child {
  margin-top: 0px;
}

@media only screen and (max-width:600px){
  .hamburger {
    display: block;
  }
  .menu {
    height: 0px;
    transition: all .3s ease-in-out;
    position: absolute;
    overflow: hidden;
  }
  .menu.active {
    height: 150px;
    transition: all .3s ease-in-out;
    z-index: 999;
  }
  .red {
    width: 100%;
    /* height: 100vw; */
  }
}

和一点点Javascript：

document.getElementById('hamClick').addEventListener('click', function() {
  var collapse = document.getElementById('menu');
  collapse.classList.toggle('active');
});

在这里查看JSFiddle代码：JSFiddle

导航栏干扰Div

2 个答案: