Блог

Главная - Вопросы по программированию - Моя страница не будет прокручиваться, даже без фиксированного позиционирования

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

#css #html

#css #HTML

Вопрос:

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

 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 for text.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>

Комментарии:

1. Обычно вы не помещаете переполнение в html-тег. С другой стороны, телу автоматически присваивается значение переполнения auto, или вы могли бы добавить свойство overflow в div.

2. изменил переполнение на прокрутку для тела и html, все равно не будет прокручиваться. Я мог бы попробовать это с div. Будет ли боковой или верхний div блокировать мою страницу?

3. Попробуйте удалить все «фиксированные» позиции. Присвоив элементу фиксированное положение, сообщите браузеру, чтобы он не перемещал его.

Ответ №1:

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

 a <br>
a <br>
a <br>
...

Ответ №2:

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

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

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

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

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

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

Комментарии:

1. Я нарисовал грубый эскиз, но, планируя его, я предполагаю, что я не учитывал прокрутку. Я добавил блок отображения для большинства вещей, но на самом деле ничего не изменилось. Думаю, я продолжу попытки, но, возможно, фон имеет к этому какое-то отношение. Спасибо 🙂