Моя страница не будет прокручиваться, даже без фиксированного позиционирования - PullRequest
Новая
       1

Моя страница не будет прокручиваться, даже без фиксированного позиционирования

1 голос
/ 02 апреля 2019

Итак, моя страница не будет прокручиваться вниз. У меня есть текст внизу страницы, но я все еще не могу прокрутить его до остальной части страницы. Я перепутал с позициями, но ничего не помогло. Я не уверен, что вызывает его блокировку, хотя это может иметь какое-то отношение к фону. Я пробовал переполнение, и все, что происходит, это фоновые прокрутки с переполнением. 

html {
  height: 100%;
  width: 960px;
  overflow: scroll;
}

.active {
  background-color: #4caf50;
  height: 50px;
}

ul {
  list-style-type: disc;
  margin: 0px;
  padding 3;
  overflow: hidden;
  float: right;
  font: 15px "Courier", san-serif;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 20px;
  text-decoration: none;
  height: 20px;
  width: 60px;
  float: left;
}

li a:hover {
  background-color: lightcyan;
}

h1 {
  color: lightskyblue;
  text-decoration-color: red;
  background-color: ghostwhite;
  width: 110%;
  height: 40px;
  border-style: solid;
  border-width: 4px;
  text-align: center;
  padding: 1px;
  margin-left: 5%;
}

body {
  background: url("blue-ice-texture-wallpaper-4.jpg");
  background-repeat: no-repeat;
}

#nav {
  float: left;
  width: 100px;
  color: orange;
  margin: 90px 0px 50px;
}

#top {
  float: left;
  width: 100%;
  height: 90px;
  color: white;
  background-color: black;
  position: fixed;
  left: 110px;
  top: 0px;
}

#side {
  float: left;
  width: 110px;
  height: 6000px;
  background-color: white;
  position: fixed;
  left: 0px;
  top: 90px;
}

#main {
  width: 75%;
  height: 100%;
  color: black;
  position: fixed;
  top: 80px;
  left: 114px;
}

.tran {
  background: url("transparent%20for%20text.png");
  border-style: solid;
  border-color: dodgerblue;
  border-width: 7px;
  color: floralwhite;
  font-size: 18px;
  margin-left: 40px;
  position: fixed;
  left: 225px;
  width: 1000px;
  text-align: center;
}

#list {
  position: fixed;
  left: 25px;
  top: 80px;
  float: left;
  text-align: left;
}

.logo {
  position: fixed;
  left: 0;
  top: 0;
  background-color: gray;
  width: 110px;
  height: 90px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Welcome</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div id="nav">
    <div>
      <img src="frost.jpg" alt="Frostfall logo" class="logo">
    </div>
    <div id="side">
      <ul>
        <li><a href="main.html">Home</a></li>
        <li><a href="art.html">Art</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="screens.html">Screen-Shots</a></li>
        <li><a href="Videos.html">Videos</a></li>
        <li><a href="music.html">Music</a></li>
      </ul>
      <div id="top">
        <img width="100%" height="100%" src="poor.png">
      </div>
    </div>
  </div>
  <div id="main">
    <h1>Frostfall Studios: "The most geniune developers out there"</h1>
    <p class="tran">
      <font face="verdana">Lorem
      </font>
    </p>
  </div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

Иногда вам нужно добавить немного display: block к элементам, для которых вы устанавливаете ширину и высоту.

Попробуйте добавить display: block; к вашим html, body (и другим местам) CSS селекторы.

Вы могли бы подумать, что они должны быть по умолчанию, но я обнаружил, что разные браузеры реализуют разные свойства display, и иногда их установка просто очищает вещи.

Кроме того,Я обнаружил, что у Firefox есть некоторые недостатки в Scrolling on Fixed.Не уверен, что они были исправлены, но я бы посоветовал поиграть в инструменте Developer Inspector в Chrome / Firefox, добавив эти display: blocks;, пока вы не получите то, что хотите.

Надеюсь, это поможет.Заставить свитки работать может быть непросто, и я считаю, что это просто метод проб и ошибок, но ваш подход выглядит хорошо, и я бы попробовал.Подожди, приятель.

PS Также я считаю, что это помогает нарисовать макет на бумаге, чтобы свести голову к мелким деталям, которые, вероятно, отбрасывают тебя, заставляя его работать.

0 голосов
/ 02 апреля 2019

используйте overflow-x:scroll и overflow-y:scroll, если это не работает, попробуйте спамить: 

a <br>
a <br>
a <br>
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...