展开div以填充页面宽度

时间：2018-03-29 22:38:14

标签： html css

我正在写一个书签程序，在过去的几天里，这个错误引起了我的注意：“我是Niva，a：＆＃34;＆＃34;栏不会延伸以填满整个页面的宽度。我已经尝试检查控制台，并添加0个边距+填充，但似乎没有任何效果。如果有人能提供解决方案，那就太棒了！

#wide{
    color:white;
    font-size: 60px;
    font-family: 'Quicksand', sans-serif;
    flex: 0.1;
    background-color:rgba(51,153,255,0.5);
}

程序： https://codepen.io/Refath/pen/RjwOQN

＆＃13;
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
  /**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
  align-content: no-repeat center center fixed;
  background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.fChange:hover,
.yChange:hover,
.gChange:hover,
.aChange:hover {
  background-color: rgba(3, 3, 3, 0.21);
  transition: all ease 0.2s;
}

.circle,
.r1c,
.r2c,
.r3c,
.r4c {
  width: 90px;
  height: 90px;
  border-radius: 90px;
  fill: lightred;
  position: fixed;
  margin: auto;
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: -5px -5px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.r1c,
.r2c,
.r3c,
.r4c,
.circle {
  animation: around infinite;
  animation-duration: 30s;
  animation-direction: reverse;
}

.r1c.off,
.r2c.off,
.r3c.off,
.r4c.off {
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.circle {
  background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
  background-position: -5px -6px;
  opacity: 0.9;
}

.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
  width: 108px;
  height: 108px;
  border-radius: 108px;
  transition: 0.07s ease-in;
  background-size: 120px 120px;
  background-position: -5.4px -5.4px;
}

.r1c {
  overflow: hidden;
  top: 400px;
  background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}

.r2c {
  top: -400px;
  background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}

.r3c {
  left: 400px;
  background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
}

.r4c {
  right: 400px;
  background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}

.r1l,
.r2l,
.r3l,
.r4l {
  border: white 1px solid;
  width: 0px;
  height: 90px;
  border-radius: 90px;
  fill: lightred;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.r1l {
  top: 200px;
}

.r2l {
  top: -200px;
}

.r3l {
  width: 90px;
  height: 0px;
  left: 200px;
}

.r4l {
  width: 90px;
  height: 0px;
  left: -200px;
}

.parent.off {
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.parent {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  animation: around infinite;
}

.parent.custom {
  animation-duration: 30s;
}

@keyframes around {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#wide {
  color: white;
  font-size: 60px;
  font-family: 'Quicksand', sans-serif;
  flex: 0.1;
  background-color: rgba(51, 153, 255, 0.5);
}

#narrow {
  color: lightblue;
  font-size: 60px;
  flex: 0.9;
  font-family: 'Quicksand', sans-serif;
  background-color: rgba(51, 153, 255, 0.7);
}

.name {
  position: relative;
  font-size: 60px;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
}

.rotate-text {
  color: white;
  font-size: 60px;
  flex: 0.5;
  font-family: 'Quicksand', sans-serif;
  background: lightblue;
  background-color: rgba(51, 153, 255, 0.8);
}

#parent {
  display: flex;
  background-color: red;
}

.juan {
  font: 40px/50px Arial;
  text-align: center;
}

.jesus {
  text-align: center;
  font-size: 20px;
}

.rotate-text {
  display: inline-block;
  background-color: lightgreen;
}

.rotating {
  float: right;
  overflow: hidden;
  position: relative;
  height: 100px;
}

.inside {
  display: inline-block;
  color: lightblue;
  position: relative;
  white-space: nowrap;
  top: -20px;
  left: 0px;
  animation: move 5s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  padding: 20px;
}

@keyframes move {
  0% {
    top: -20px;
  }
  20% {
    top: -100px;
  }
  40% {
    top: -200px;
  }
  60% {
    top: -300px;
  }
}

.name {
  color: white;
}

.options {
  width: 400px;
  height: 450px;
  color: white;
  padding: 15px 10px 0px 5px;
  float: left;
  position: relative;
  top: -340px;
  left: 20px;
}

.gtext,
.atext,
.ytext,
.ftext {
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  width: 20px;
  height: 25px;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
}

li {
  padding: 7px;
}

html {
  overflow: hidden;
  height: 100%;
}

body {
  height: 100%;
  overflow: auto;
}

button {
  fill: red;
}

.setText {
  text-align: center;
  font-size: 20px;
}

button {
  color: red;
}


/**Derived from: **/

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
  font-size: 2em;
}
.fa {
  position: relative;
  display: table-cell;
  width: 160px;
  height: 236px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
  width: 300px;
  overflow: visible;
  overflow-y: scroll;
  padding-left: 20px;
  transition: 0.9s ease-out all;
}
.main-menu {
  padding-left: 20px;
  background: #fbfbfb;
  position: absolute;
  top: 100px;
  background-color: rgba(51, 153, 255, 0.5);
  bottom: 0px;
  height: 90%;
  left: 0;
  width: 20px;
  overflow: visible;
  overflow-y: scroll;
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 1000;
  padding-top: 20px;
  transition: 0.9s ease-out all;
  padding-bottom: 50px;
}
.featureName {
  transform: rotate(-90deg);
  position: relative;
  top: 50%;
  right: 10px;
}
.main-menu:hover>.featureName {
  visibility: hidden;
}
.main-menu>ul {
  margin: 2px 0;
}
.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}

/**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
**/
.main-menu li>a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: #999;
  font-family: arial;
  font-size: 14px;
  text-decoration: none;
  -webkit-transform: translateZ(0) scale(1, 1);
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}
.main-menu .nav-icon {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 20px;
}
.main-menu>ul.logout {
  position: absolute;
  left: 0;
  bottom: 0;
}
.no-touch .scrollable.hover {
  overflow-y: visible;
  overflow-y: scroll;
}
.no-touch .scrollable.hover:hover {
  overflow-y: auto;
  overflow: visible;
  overflow-y: scroll;
}
a:hover,
a:focus {
  text-decoration: none;
}
nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
  color: #fff;
  background-color: #5fa2db;
}
.blurredBg {
  height: 100%;
  width: 100%;
  text-align: center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#ImageUrl {}
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* ---------- GENERAL ---------- */
a {
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  left: 70%;
  position: absolute;
  top: 50%;
  transition: 0.3s all ease;
}

/* ---------- SOCIAL ---------- */
.social {
  position: relative;
  height: 3em;
  width: 13.5em;
}
.social li {
  display: block;
  height: 4em;
  line-height: 4em;
  margin: -2.2em;
  position: absolute;
  -webkit-transition: -webkit-transform .7s;
  -moz-transition: -moz-transform .7s;
  -ms-transition: -ms-transform .7s;
  -o-transition: -o-transform .7s;
  transition: transform .7s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  width: 4em;
}
.social a {
  color: #fffdf0;
  display: block;
  height: 4em;
  line-height: 4em;
  text-align: center;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 4em;
  transition: 0.3s all ease;
}
.social li:hover {
  -webkit-transform: scale(1.3, 1.3) rotate(45deg);
  -moz-transform: scale(1.3, 1.3) rotate(45deg);
  -ms-transform: scale(1.3, 1.3) rotate(45deg);
  -o-transform: scale(1.3, 1.3) rotate(45deg);
  transform: scale(1.3, 1.3) rotate(45deg);
  transition: 0.3s all ease;
}
.facebook {
  background: #155b9d;
  left: 0;
  top: 0%;
}
.container img {
  width: 50px;
  position: relative;
  top: -20%;
}
.twitter {
  background: #1a9ec4;
  bottom: 0;
  left: 25%;
}
.dribbble {
  background-color: lightblue;
  left: 50%;
  top: 0%;
  width: 5em;
  height: 5em;
}
.dribbble img {
  top: 0%;
}
.social .dribbble {
  width: 5em;
  height: 5em;
  left: 46%;
  top: -50%;
}
.behance {
  background: #3f7aa3;
  bottom: 0;
  left: 75%;
}
.linked-in {
  background: #157f9d;
  left: 100%;
  top: 0%;
}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="blurredBg">
</div>

<div id="parent">
  <div class="animated slideInLeft" id="wide">
    <center>Hi.</center>
  </div>

  <div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
    <center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
      <b class="rotating"> <span class = "inside">
    One-Stop Shop<br>
    Music Player<br>
    Task Manager<br>
     Hover Me!
  </span></b>
    </center>
  </div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
  <div id="weather"></div>


  <div class="circle">
  </div>

  <a href="https://www.google.com" class="glink">
    <div class="r1c">
    </div>
  </a>

  <a href="https://www.youtube.com" class="ylink">
    <div class="r2c">
    </div>
  </a>

  <a href="https://www.facebook.com" class="flink">
    <div class="r3c">
    </div>
  </a>

  <a href="https://www.amazon.com" class="alink">
    <div class="r4c">
    </div>
  </a>

  <div class="r1l">
  </div>

  <div class="r2l">
  </div>

  <div class="r3l">
  </div>

  <div class="r4l">
  </div>

</div>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h2 class="name">
  ~ Refath</h2>



<div class="area"></div>
<nav class="main-menu">
  <div class="featureName">Settings</div>
  <div class="jesus">
    <h3>Settings</h3>
    <hl>
      <ul>


        <li class="gChange">Google</li>
        <button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
        <button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
   document.getElementById('gSave').click()">

        <li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">

        <li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">

        <li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">

        <li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">

        <li class="bgChange">Background Image</li>
        <input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
				
			<br>	<br>	
 <button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>

      </ul>
  </div>
</nav>

<div class="container">

  <ul class="social">
    <li class="dribbble">
      <a href="https://chrome.google.com/webstore/detail/niva/baopkdjidjammmkhafmcienkakepjdmg" class="entypo-dribbble"><img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png"></a>
    </li>
  </ul>

</div>


<form>
  <label>Enter a new task:</label>
  <input class="input" type="text">
  <input type="submit" value="Add">
</form>
<ul title="Click to delete; drag to reorder">
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

body {
    height: 100%;
    /* overflow: auto; */
}


@import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
  /**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
  align-content: no-repeat center center fixed;
  background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.fChange:hover,
.yChange:hover,
.gChange:hover,
.aChange:hover {
  background-color: rgba(3, 3, 3, 0.21);
  transition: all ease 0.2s;
}

.circle,
.r1c,
.r2c,
.r3c,
.r4c {
  width: 90px;
  height: 90px;
  border-radius: 90px;
  fill: lightred;
  position: fixed;
  margin: auto;
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: -5px -5px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.r1c,
.r2c,
.r3c,
.r4c,
.circle {
  animation: around infinite;
  animation-duration: 30s;
  animation-direction: reverse;
}

.r1c.off,
.r2c.off,
.r3c.off,
.r4c.off {
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.circle {
  background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
  background-position: -5px -6px;
  opacity: 0.9;
}

.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
  width: 108px;
  height: 108px;
  border-radius: 108px;
  transition: 0.07s ease-in;
  background-size: 120px 120px;
  background-position: -5.4px -5.4px;
}

.r1c {
  overflow: hidden;
  top: 400px;
  background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}

.r2c {
  top: -400px;
  background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}

.r3c {
  left: 400px;
  background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
}

.r4c {
  right: 400px;
  background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}

.r1l,
.r2l,
.r3l,
.r4l {
  border: white 1px solid;
  width: 0px;
  height: 90px;
  border-radius: 90px;
  fill: lightred;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.r1l {
  top: 200px;
}

.r2l {
  top: -200px;
}

.r3l {
  width: 90px;
  height: 0px;
  left: 200px;
}

.r4l {
  width: 90px;
  height: 0px;
  left: -200px;
}

.parent.off {
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.parent {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  animation: around infinite;
}

.parent.custom {
  animation-duration: 30s;
}

@keyframes around {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#wide {
  color: white;
  font-size: 60px;
  font-family: 'Quicksand', sans-serif;
  flex: 0.1;
  background-color: rgba(51, 153, 255, 0.5);
}

#narrow {
  color: lightblue;
  font-size: 60px;
  flex: 0.9;
  font-family: 'Quicksand', sans-serif;
  background-color: rgba(51, 153, 255, 0.7);
}

.name {
  position: relative;
  font-size: 60px;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
}

.rotate-text {
  color: white;
  font-size: 60px;
  flex: 0.5;
  font-family: 'Quicksand', sans-serif;
  background: lightblue;
  background-color: rgba(51, 153, 255, 0.8);
}

#parent {
  display: flex;
  background-color: red;
}

.juan {
  font: 40px/50px Arial;
  text-align: center;
}

.jesus {
  text-align: center;
  font-size: 20px;
}

.rotate-text {
  display: inline-block;
  background-color: lightgreen;
}

.rotating {
  float: right;
  overflow: hidden;
  position: relative;
  height: 100px;
}

.inside {
  display: inline-block;
  color: lightblue;
  position: relative;
  white-space: nowrap;
  top: -20px;
  left: 0px;
  animation: move 5s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  padding: 20px;
}

@keyframes move {
  0% {
    top: -20px;
  }
  20% {
    top: -100px;
  }
  40% {
    top: -200px;
  }
  60% {
    top: -300px;
  }
}

.name {
  color: white;
}

.options {
  width: 400px;
  height: 450px;
  color: white;
  padding: 15px 10px 0px 5px;
  float: left;
  position: relative;
  top: -340px;
  left: 20px;
}

.gtext,
.atext,
.ytext,
.ftext {
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  width: 20px;
  height: 25px;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
}

li {
  padding: 7px;
}

html {
  overflow: hidden;
  height: 100%;
}

body {
  height: 100%;
  /* overflow: auto; */
}

button {
  fill: red;
}

.setText {
  text-align: center;
  font-size: 20px;
}

button {
  color: red;
}


/**Derived from: **/

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
  font-size: 2em;
}
.fa {
  position: relative;
  display: table-cell;
  width: 160px;
  height: 236px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
  width: 300px;
  overflow: visible;
  overflow-y: scroll;
  padding-left: 20px;
  transition: 0.9s ease-out all;
}
.main-menu {
  padding-left: 20px;
  background: #fbfbfb;
  position: absolute;
  top: 100px;
  background-color: rgba(51, 153, 255, 0.5);
  bottom: 0px;
  height: 90%;
  left: 0;
  width: 20px;
  overflow: visible;
  overflow-y: scroll;
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 1000;
  padding-top: 20px;
  transition: 0.9s ease-out all;
  padding-bottom: 50px;
}
.featureName {
  transform: rotate(-90deg);
  position: relative;
  top: 50%;
  right: 10px;
}
.main-menu:hover>.featureName {
  visibility: hidden;
}
.main-menu>ul {
  margin: 2px 0;
}
.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}

/**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
**/
.main-menu li>a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: #999;
  font-family: arial;
  font-size: 14px;
  text-decoration: none;
  -webkit-transform: translateZ(0) scale(1, 1);
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}
.main-menu .nav-icon {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 20px;
}
.main-menu>ul.logout {
  position: absolute;
  left: 0;
  bottom: 0;
}
.no-touch .scrollable.hover {
  overflow-y: visible;
  overflow-y: scroll;
}
.no-touch .scrollable.hover:hover {
  overflow-y: auto;
  overflow: visible;
  overflow-y: scroll;
}
a:hover,
a:focus {
  text-decoration: none;
}
nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
  color: #fff;
  background-color: #5fa2db;
}
.blurredBg {
  height: 100%;
  width: 100%;
  text-align: center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#ImageUrl {}
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* ---------- GENERAL ---------- */
a {
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  left: 70%;
  position: absolute;
  top: 50%;
  transition: 0.3s all ease;
}

/* ---------- SOCIAL ---------- */
.social {
  position: relative;
  height: 3em;
  width: 13.5em;
}
.social li {
  display: block;
  height: 4em;
  line-height: 4em;
  margin: -2.2em;
  position: absolute;
  -webkit-transition: -webkit-transform .7s;
  -moz-transition: -moz-transform .7s;
  -ms-transition: -ms-transform .7s;
  -o-transition: -o-transform .7s;
  transition: transform .7s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  width: 4em;
}
.social a {
  color: #fffdf0;
  display: block;
  height: 4em;
  line-height: 4em;
  text-align: center;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 4em;
  transition: 0.3s all ease;
}
.social li:hover {
  -webkit-transform: scale(1.3, 1.3) rotate(45deg);
  -moz-transform: scale(1.3, 1.3) rotate(45deg);
  -ms-transform: scale(1.3, 1.3) rotate(45deg);
  -o-transform: scale(1.3, 1.3) rotate(45deg);
  transform: scale(1.3, 1.3) rotate(45deg);
  transition: 0.3s all ease;
}
.facebook {
  background: #155b9d;
  left: 0;
  top: 0%;
}
.container img {
  width: 50px;
  position: relative;
  top: -20%;
}
.twitter {
  background: #1a9ec4;
  bottom: 0;
  left: 25%;
}
.dribbble {
  background-color: lightblue;
  left: 50%;
  top: 0%;
  width: 5em;
  height: 5em;
}
.dribbble img {
  top: 0%;
}
.social .dribbble {
  width: 5em;
  height: 5em;
  left: 46%;
  top: -50%;
}
.behance {
  background: #3f7aa3;
  bottom: 0;
  left: 75%;
}
.linked-in {
  background: #157f9d;
  left: 100%;
  top: 0%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="blurredBg">
</div>

<div id="parent">
  <div class="animated slideInLeft" id="wide">
    <center>Hi.</center>
  </div>

  <div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
    <center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
      <b class="rotating"> <span class = "inside">
    One-Stop Shop<br>
    Music Player<br>
    Task Manager<br>
     Hover Me!
  </span></b>
    </center>
  </div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
  <div id="weather"></div>


  <div class="circle">
  </div>

  <a href="https://www.google.com" class="glink">
    <div class="r1c">
    </div>
  </a>

  <a href="https://www.youtube.com" class="ylink">
    <div class="r2c">
    </div>
  </a>

  <a href="https://www.facebook.com" class="flink">
    <div class="r3c">
    </div>
  </a>

  <a href="https://www.amazon.com" class="alink">
    <div class="r4c">
    </div>
  </a>

  <div class="r1l">
  </div>

  <div class="r2l">
  </div>

  <div class="r3l">
  </div>

  <div class="r4l">
  </div>

</div>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h2 class="name">
  ~ Refath</h2>



<div class="area"></div>
<nav class="main-menu">
  <div class="featureName">Settings</div>
  <div class="jesus">
    <h3>Settings</h3>
    <hl>
      <ul>


        <li class="gChange">Google</li>
        <button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
        <button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
   document.getElementById('gSave').click()">

        <li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">

        <li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">

        <li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">

        <li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">

        <li class="bgChange">Background Image</li>
        <input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
				
			<br>	<br>	
 <button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>

      </ul>
  </div>
</nav>

<div class="container">

  <ul class="social">
    <li class="dribbble">
      <a href="https://chrome.google.com/webstore/detail/niva/baopkdjidjammmkhafmcienkakepjdmg" class="entypo-dribbble"><img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png"></a>
    </li>
  </ul>

</div>


<form>
  <label>Enter a new task:</label>
  <input class="input" type="text">
  <input type="submit" value="Add">
</form>
<ul title="Click to delete; drag to reorder">
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="scripts.js"></script>

你也遇到了问题

.main-menu {
  height: 90%;

screenshot

应该是

height: calc(100% - 100px);

但如果您删除height（或将其设置为auto）并仅使用

，那会更好 
bottom: 0;

因此无论窗口大小如何，该块都适合：

screenshot of fixed isuue

答案 1 :(得分：1)

问题解决了！事实证明，之后有一个填充代码干扰了我的命令！

相关问题
最新问题