Как сделать так, чтобы содержимое страницы прокручивалось за кнопку с фиксированным положением? - PullRequest
Новая
       0

Как сделать так, чтобы содержимое страницы прокручивалось за кнопку с фиксированным положением?

0 голосов
/ 27 марта 2020

У меня есть кнопка с position: fixed внизу веб-страницы. Как сделать так, чтобы содержимое страницы прокручивалось за кнопкой? Вот изображение с более подробной информацией о том, что я имею в виду: enter image description here

Вот код, который я пробовал: 

<!DOCTYPE html>
 <html>
    <head>
        <style type="text/css">
    
            #content {
        
                height: 150px;
                width: 100%;
                background-color:lightpink;
                padding:25px;
                margin:20px;
            
            }
            #header{
                color:white;   
                width:100%;
                height:40px;
                left:0;
                top:0;
                position:fixed;
                background-color:black;
            }
            
            #sidebar{
                top:0;
                left:0;
                width:90px;
                height:100%;
                position:fixed;
                color:white;
                background-color:steelblue;
            }
             
            .btn-bottom-center {
                position: fixed;
                left: 50%;
                bottom: 20px;
                transform: translate(-50%, -50%);
                margin: 0 auto;   
            }
        </style>
    </head>
    <body>
        <div id="defaultFragment" fragment="defaultFragment">
            <div id="header"> <center><h3>Header</h3></center>   </div>
            <div class="main-container container-fluid">
                <div class="page-container">
                    <div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
                    <div class="page-content">
                        <div class="page-body">
                            <div id="content" layout:fragment="content"></div>
                            <div id="content" layout:fragment="content"></div>
                            <div id="content" layout:fragment="content"></div>
                            <div id="content" layout:fragment="content"></div>
                        </div>
                    </div>
                </div>
                <div th:replace="fragments/footer :: footerFragment"></div>
            </div>
        </div>
    
        <!--Get Started-->
        <input id="get_started" type="button" class="btn-bottom-center" value="GET STARTED" />
            
    </body>
 </html>

Размеры не очень важны. Мне просто нужно знать логику c о том, как сделать прокрутку div за кнопкой с фиксированным положением внизу веб-страницы. Я попытался добавить margin-bottom к содержанию страницы, но это не сработало. Спасибо уже

1 Ответ

1 голос
/ 27 марта 2020

Заверните кнопку в фиксированную позицию div с определенной высотой, left: 90px;, right: 0, bottom: 0 и непрозрачным фоном: 

html,
body {
  margin: 0;
}

#content {
  height: 150px;
  width: 100%;
  background-color: lightpink;
  padding: 25px;
  margin: 20px;
}

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

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

.btn-bottom-center {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, -50%);
  margin: 0 auto;
}

.bottom {
  height: 80px;
  background: green;
  position: fixed;
  bottom: 0;
  left: 90px;
  right: 0;
}
<div id="defaultFragment" fragment="defaultFragment">
  <div id="header">
    <center>
      <h3>Header</h3>
    </center>
  </div>
  <div class="main-container container-fluid">
    <div class="page-container">
      <div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
      <div class="page-content">
        <div class="page-body">
          <div id="content" layout:fragment="content"></div>
          <div id="content" layout:fragment="content"></div>
          <div id="content" layout:fragment="content"></div>
          <div id="content" layout:fragment="content"></div>
        </div>
      </div>
    </div>
    <div th:replace="fragments/footer :: footerFragment"></div>
  </div>
</div>

<!--Get Started-->
<div class="bottom">
  <input id="get_started" type="button" class="btn-bottom-center" value="GET STARTED" />
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...