Блог

Главная - Вопросы по программированию - Как мне переместить блок ниже экрана, чтобы я мог прокручивать его вместо того, чтобы он находился в нижней части экрана

Как мне переместить блок ниже экрана, чтобы я мог прокручивать его вместо того, чтобы он находился в нижней части экрана

#html #css

#HTML #css

Вопрос:

Это мой HTML

 <!DOCTYPE HTML>
<html>
 <head>
   <div class="topbar"></div>
   <link rel="stylesheet" href="new.css">
 </head>
 <body>
  <header class="headings">
   <h1 align="center">Header</h1>
   <h3 align="center">smaller header</h3>
  </header>
  <form class="form">
    <h1>Login</h1>
    <input type="text" name="Username" placeholder="Username" autofocus/></br>
    <input type="password" name="Password" placeholder="Password"></br>
    <input type="submit" name="" value="submit">
  </form>
  <div class="bottombar">
    <h1 align="center"><ins>About Us</ins></h1>
    <p>blah blah blah</br>blah blah blah</br>blah blah blah</br></p>
  </div>

 </body>
</html>

и это CSS для панели внизу

 .bottombar{
  z-index: 1;
  left: 0px;
  bottom: 0px;
  position: fixed;
  font-family: sans-serif;
  text-align: center;
  width: 100%;
  height: 150px;
  background-color: #FDFEFE;
  box-shadow: 0px 2px 10px 3px #888888;
}

это результат на данный момент

введите описание изображения здесь

Проблема в том, что панель «О нас» внизу торчит снизу и отображается на экране. Я хочу, чтобы он располагался чуть ниже экрана, чтобы я мог прокручивать его вместо этого.

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

1. вы уже пробовали margin-top в другой позиции?, position fixed элемент не может быть вне поля зрения и прокручивается снова, исправленный остается на месте, поэтому, если его не видно, он останется таким, я цитирую w3schools position: fixed; An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.

2. Вы не должны использовать фиксированную позицию, вместо абсолютной позиции и использовать top: 100vh вместо bottom: 0

Ответ №1:

Подойдет ли это?

совет: попробуйте просмотреть в развернутом виде или после развертывания фрагмента для полного просмотра.

 .container {display: flex; flex-direction: column;}

section {height: 100%;display:block;background: yellow;height: 100vh;text-align:center;}

.bottombar{
  text-align: center;
  width: 50%;
  height: 150px;
  background-color: #FDFEFE;
  box-shadow: 0px 2px 10px 3px #888888;
  margin: auto;
}  
 <div class="container">

  <section>
    <header class="headings">
      <h1 align="center">Header</h1>
      <h3 align="center">smaller header</h3>
    </header>
    <form>
      <h1>Login</h1>
      <input type="text" name="Username" placeholder="Username" autofocus/>         <br/>
      <input type="password" name="Password" placeholder="Password"><br/>
      <input type="submit" name="" value="submit">
    </form>
  </section>
  
  <div class="bottombar">
      <h1><ins>About Us</ins></h1>
      <p>blah blah blah<br/>blah blah blah<br/>blah blah blah<br/></p>
  </div>
  
</div>