CSS / JS仅将div之一调整大小/滚动到固定页脚

时间：2018-11-14 19:30:09

标签： javascript html css scroll fixed

已解决：谢谢大家的帮助！

下面的代码片段显示了我的问题在解决之前的样子。无论我进行了哪些CSS编辑，div的“单词”都无法滚动。我只希望正文中的一个div“单词”滚动而不是在页眉和页脚之间滚动全部内容。

解决方案：我将Java脚本与一个函数结合在一起，该函数具有根据浏览器窗口调整div单个单词的大小。

html, body {
height: 100%;
margin: 0 auto;
color: #4c4c4c;
overflow-x: hidden;
overflow-y: hidden;
text-align: center;
font-family: 'Roboto', sans-serif;
-webkit-text-size-adjust: none; -ms-text-size-adjust:100%;
font-size: 13px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-print-color-adjust: exact;
}
a, a:hover, a:active, a:visited {
  cursor: pointer !important;
}
*:focus {
 outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: gray;
}
::-moz-placeholder { /* Firefox 19+ */
 color: gray;
}
:-ms-input-placeholder { /* IE 10+ */
 color: gray;
}
:-moz-placeholder { /* Firefox 18- */
 color: gray;
}
button, input, select, textarea {
 font-family: 'Lato', serif;
}
::-webkit-input-placeholder {
 font-family: 'Lato', serif;
}
:-moz-placeholder {
 font-family: 'Lato', serif;
}
::-moz-placeholder {
 font-family: 'Lato', serif;
}
:-ms-input-placeholder {
 font-family: 'Lato', serif;
}
input:required {
 box-shadow:none;
}
input:-moz-placeholder,
input::-moz-placeholder {
 opacity: 1;
}
input:required:invalid {
 outline: none;
}
.qghover {
 line-height: 40px;
 font-size: 13px;
 font-weight: 300;
 color: #4c4c4c;
 padding: 12px 30px;
 background: #f7f7f7;
}
.hoverontouch--aktiv .qghover {
 background-color: #006E6D;
 color: white;
 padding: 12px 30px;
}
#qgtouch:hover {
background-color: #006E6D;
color: white;
}
#qgtouch.active {
background-color: #006E6D;
color: white;
 padding: 12px 30px;
}

#header, #content, #footer {
 right:0;
 left:0;
}

#header {
 top: 0;
 position: fixed;
 height: 40px;
 background-color: #f7f7f7;
 z-index: 1;
}

#content {
 position: fixed;
 padding: 60px 0;
}
#footer {
 bottom: 0;
 position: fixed;
 height: 40px;
 background-color: #f7f7f7;
}

.worldwide {
 position: relative;
 margin: 0 auto;
 top: 10px;
 height: 43px;
 width: 43px;
 background: url(https://www.dollarresources.com/dollarresourcesworldwide.svg);
 background-size: 43px 43px;
 background-repeat: no-repeat;
}
.search-bar {
 position: relative;
 top: 6px;
 height: 95px;
}
.search-bar input[type=text] {
 padding: 7px 0 9px 20px; /* size of search box */
 font-size: 17px;
 font-weight: 300;
 border: 1px solid #f1f3f4;
 border-radius: 20px 0 0 20px;
 width: 72%;
 max-width: 475px;
 -webkit-appearance: none;
 top: 24px;
 position: relative;
 margin-top: 0;
 background-color: #f1f3f4;
}
.search-button button {
 padding: 7px 18px 9px 15px; /* last number moves icon left or right */
 background: #f1f3f4;
 font-size: 17px;
 border: 1px solid #f1f3f4;
 cursor: pointer;
 border-radius: 0 20px 20px 0;
 margin-left: -5px; /* merges icon with search bar */
 -webkit-appearance: none;
 top: 24px;
 position: relative;
 margin-top: 0;
}
.fa-search {
 color: #008080;
}

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


.grow {
 -webkit-animation-duration: .5s;
 animation-duration: .5s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
@-webkit-keyframes WorldWide {
 from {
 -webkit-transform: rotate(0) scale(1);
 transform: rotate(0) scale(1);
 }
 to {
 -webkit-transform: rotate(-360deg) scale(1);
 transform: rotate(-360deg) scale(1);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 }
}
@keyframes WorldWide {
 from {
 -webkit-transform: rotate(0) scale(1);
 transform: rotate(0) scale(1);
 }
 to {
 -webkit-transform: rotate(-360deg) scale(1);
 transform: rotate(-360deg) scale(1);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 }
}
.WorldWide {
 -webkit-animation-name: WorldWide;
 animation-name: WorldWide;
}
<!DOCTYPE html>
<html>

<head>
<title>Dollar Resources</title>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png?m=44637498" />
<link rel="icon" type="image/png" sizes="144x144" href="favicon.png?m=449972498">
<meta name="description" content="Bringing original, affordable, & useful resources to the world.">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel="stylesheet">
<link rel="stylesheet" href="pta2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>

<body>

<?php

include "db_connect.php";

// include "search_all_resources.php";

?>

<div id="header">
  <a href="newest2.php" class="hoverontouch"><span class="qghover" id="qgtouch">
  Newest
  </a></span>
  <a href="categories2.php" class="hoverontouch"><span class="qghover" id="qgtouch">
  Categories
  </a></span>
  <a href="signin2.php" class="hoverontouch"><span class="qghover" id="qgtouch">
  Sign In
  </a></span>
</div>

<div id="content">
   
   <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 class="words">

  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h2 style="font-weight: 300">Lorem</h2>
  <p style="color:gray; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>

</div>


<div id="footer">

  <a href="privacy2.php" class="hoverontouch"><span class="qghover active" id="qgtouch">
  Privacy
  </a></span>
  <a href="terms2.php" class="hoverontouch"><span class="qghover" id="qgtouch">
  Terms
  </a></span>
  <a href="about2.php" class="hoverontouch"><span class="qghover" id="qgtouch">
  About
  </a></span>

 </div>

 

</body>

</html>

2 个答案:

答案 0 :(得分：3)

这里的问题是“单词”延伸到页面底部。为了使滚动像div标签上那样工作，您需要为其设置一个静态高度，否则div将自动调整为其内容的高度，并表现得像普通div标签一样。

要使其具有响应性，您将需要在javaScript中使用else(equiptype == 'Unnumbered'){ } 来获取屏幕总高度，然后减去页眉和页脚区域的高度，然后使用结果设置div标签的高度。为了获得最佳结果，请使用screen.height;之类的内容重新检查一下屏幕的高度，以确保在有人调整窗口大小时不会弄乱屏幕。

window.setInterval(setWordsHeight(), 100);

答案 1 :(得分：1)

将position: fixed;的{​​{1}}删除

#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

那应该可以解决您的问题，如果有帮助，请告诉我！

编辑1

首先，我们需要更新标记，让我们创建一个新的容器div并为其指定类.words { text-align: left; margin: 0 20px 0 20px; } ，该类必须位于.new-header div之外

#content

如您所见，在<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> div中，您拥有第二个标头所需的所有信息，然后需要添加此CSS 

.new-header

现在我们需要给.new-header{ position: fixed; top: 40px; width: 100%; background-color: #fff; } div更多的填充顶部

#content

如果您在使用此功能时遇到任何问题，请告诉我。

相关问题
最新问题