CSS / JS делает только один из divs изменяет размер / прокручивает до фиксированного нижнего колонтитула - PullRequest
Новая
       48

CSS / JS делает только один из divs изменяет размер / прокручивает до фиксированного нижнего колонтитула

0 голосов
/ 14 ноября 2018

решено: спасибо за вашу помощь всем!

Фрагмент ниже показывает, как выглядела моя проблема до того, как она была решена.Div "words" нельзя было прокручивать независимо от того, какие CSS-правки я сделал.Я хотел, чтобы только одно слово "div" из тела прокручивало не весь контент между верхним и нижним колонтитулами.

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Удалить position: fixed; для #content

#content {
 padding: 60px 0;
}

, а также overflow-y: hidden; из body

html, body {
    height: 100%;
    margin: 0 auto;
    color: #4c4c4c;
    overflow-x: hidden;
    text-align: center;
}

И для последнего удаления overflow-y: scroll; из .words

.words {
 text-align: left;
 margin: 0 20px 0 20px;
}

Это должно решить вашу проблему, дайте мне знать, если это поможет!

Изменить 1

Итак, прежде всего нам нужноЧтобы обновить разметку, давайте создадим новый контейнерный элемент div и присвоим ему класс .new-header, который должен находиться за пределами #content div 

<div class="new-header">
   <a class="hoverontouch" href="https://www.dollarresources.com">
      <div class="worldwide grow WorldWide">
      </div>
       </a>

        <div class="search-bar">
         <div class="search-button">
         <form action="search_keyword.php">
              <input type="text" name="keyword" placeholder="Search Dollar Resources..." required oninvalid="this.setCustomValidity('Please enter a search word or phrase')"
     oninput="setCustomValidity('')" autocomplete="off"  onfocus="this.placeholder = ''"
    onblur="this.placeholder = 'Search Dollar Resources...'">
              <button type="submit" value="Submit"><i class="fa fa-search"></i></button>
            </form>
    <?php

    // include "search_keyword.php";

    $mysqli->close();

    ?>
       </div>
      </div>
</div>

Как вы можете видеть, внутри .new-header divу вас есть вся информация, необходимая для второго заголовка, а затем вам нужно добавить эту css 

.new-header{
  position: fixed;
  top: 40px;
  width: 100%;
  background-color: #fff;
}

Теперь нам нужно дать #content div больше padding-top 

#content {
 padding: 170px 0 60px 0;
}

Дайте мне знать, если у вас возникнут проблемы с применением этого.

0 голосов
/ 14 ноября 2018

Проблема здесь в том, что «слова» распространяются внизу страницы.Чтобы прокрутка работала подобным образом в теге div, вам нужно присвоить ему статическую высоту, в противном случае div автоматически подстраивается под высоту его содержимого и ведет себя так же, как обычный тег div.

Чтобы сделать его отзывчивымВам нужно будет использовать screen.height; в javaScript, чтобы получить общую высоту экрана, затем вычесть высоту областей верхнего и нижнего колонтитула, а затем установить высоту тега div, используя результат.Для достижения наилучших результатов используйте что-то вроде window.setInterval(setWordsHeight(), 100);, чтобы перепроверить высоту экрана на интервале, чтобы он не запутался, если кто-то изменит размер своего окна. 

var headerFooterHeight = 200; 
window.setInterval( function(){
    document.getElementById("words").style.height = (window.innerHeight - headerFooterHeight)+"px"; 
console.log(document.getElementById("words").style.height);
}, 100);
...