CSS / JS make only one of the divs resize/scroll to fixed footer

SOLVED: Thanks for all your help everyone!

The snippet below shows what my issue looked like before it was solved. The div "words" wasn't able to be scrolled no matter what CSS edits I made. I wanted just the one div "words" from the body to scroll not the entire content between the header and footer.

SOLUTION: I incorporated java script with a function that has the single div "words" resize based on the browser window.

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>

edited Nov 16 '18 at 16:17

asked Nov 14 '18 at 19:30

SCodeSK71

176

1

I would suggest you to use the snippet feature and provide an working example of your issue. It will ease helpers work and it will raise the amount and quality of helper who is gonna help you out. :)

– Jonathan Gagne
Nov 14 '18 at 19:34

@JonathanGagne thanks for that recommendation. I don't know how to use the snippet feature. I will try looking for it now

– SCodeSK71
Nov 14 '18 at 19:35

Inside the edit box tool bar, there is a button named Snippet. Click on it and split your html code into the html code block, the css code into the css part and then you can take a look on the end result by clicking on Run. If the result satisfy you, click on Save and write down your question before and/or after the snippet code block.

– Jonathan Gagne
Nov 14 '18 at 19:38

@JonathanGagne I was able to add a Snippet! Thanks for recommending it - hopefully I can find a solution now

– SCodeSK71
Nov 14 '18 at 19:48

My pleasure!!! Thank you for making Stack Overflow a better place to live where people are nice and smart ;)

– Jonathan Gagne
Nov 14 '18 at 19:59

add a comment |

SOLVED: Thanks for all your help everyone!

SOLUTION: I incorporated java script with a function that has the single div "words" resize based on the browser window.

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>

edited Nov 16 '18 at 16:17

asked Nov 14 '18 at 19:30

SCodeSK71

176

1

I would suggest you to use the snippet feature and provide an working example of your issue. It will ease helpers work and it will raise the amount and quality of helper who is gonna help you out. :)

– Jonathan Gagne
Nov 14 '18 at 19:34

@JonathanGagne thanks for that recommendation. I don't know how to use the snippet feature. I will try looking for it now

– SCodeSK71
Nov 14 '18 at 19:35

Inside the edit box tool bar, there is a button named Snippet. Click on it and split your html code into the html code block, the css code into the css part and then you can take a look on the end result by clicking on Run. If the result satisfy you, click on Save and write down your question before and/or after the snippet code block.

– Jonathan Gagne
Nov 14 '18 at 19:38

@JonathanGagne I was able to add a Snippet! Thanks for recommending it - hopefully I can find a solution now

– SCodeSK71
Nov 14 '18 at 19:48

My pleasure!!! Thank you for making Stack Overflow a better place to live where people are nice and smart ;)

– Jonathan Gagne
Nov 14 '18 at 19:59

add a comment |

SOLVED: Thanks for all your help everyone!

SOLUTION: I incorporated java script with a function that has the single div "words" resize based on the browser window.

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>

edited Nov 16 '18 at 16:17

asked Nov 14 '18 at 19:30

SCodeSK71

176

SOLVED: Thanks for all your help everyone!

SOLUTION: I incorporated java script with a function that has the single div "words" resize based on the browser window.

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>

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>

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>

javascript html css scroll fixed

edited Nov 16 '18 at 16:17

asked Nov 14 '18 at 19:30

SCodeSK71

176

edited Nov 16 '18 at 16:17

asked Nov 14 '18 at 19:30

SCodeSK71

176

edited Nov 16 '18 at 16:17

asked Nov 14 '18 at 19:30

SCodeSK71

176

asked Nov 14 '18 at 19:30

SCodeSK71

176

asked Nov 14 '18 at 19:30

SCodeSK71

176

1

I would suggest you to use the snippet feature and provide an working example of your issue. It will ease helpers work and it will raise the amount and quality of helper who is gonna help you out. :)

– Jonathan Gagne
Nov 14 '18 at 19:34

@JonathanGagne thanks for that recommendation. I don't know how to use the snippet feature. I will try looking for it now

– SCodeSK71
Nov 14 '18 at 19:35

Inside the edit box tool bar, there is a button named Snippet. Click on it and split your html code into the html code block, the css code into the css part and then you can take a look on the end result by clicking on Run. If the result satisfy you, click on Save and write down your question before and/or after the snippet code block.

– Jonathan Gagne
Nov 14 '18 at 19:38

@JonathanGagne I was able to add a Snippet! Thanks for recommending it - hopefully I can find a solution now

– SCodeSK71
Nov 14 '18 at 19:48

My pleasure!!! Thank you for making Stack Overflow a better place to live where people are nice and smart ;)

– Jonathan Gagne
Nov 14 '18 at 19:59

add a comment |

1

I would suggest you to use the snippet feature and provide an working example of your issue. It will ease helpers work and it will raise the amount and quality of helper who is gonna help you out. :)

– Jonathan Gagne
Nov 14 '18 at 19:34

@JonathanGagne thanks for that recommendation. I don't know how to use the snippet feature. I will try looking for it now

– SCodeSK71
Nov 14 '18 at 19:35

Inside the edit box tool bar, there is a button named Snippet. Click on it and split your html code into the html code block, the css code into the css part and then you can take a look on the end result by clicking on Run. If the result satisfy you, click on Save and write down your question before and/or after the snippet code block.

– Jonathan Gagne
Nov 14 '18 at 19:38

@JonathanGagne I was able to add a Snippet! Thanks for recommending it - hopefully I can find a solution now

– SCodeSK71
Nov 14 '18 at 19:48

My pleasure!!! Thank you for making Stack Overflow a better place to live where people are nice and smart ;)

– Jonathan Gagne
Nov 14 '18 at 19:59

I would suggest you to use the snippet feature and provide an working example of your issue. It will ease helpers work and it will raise the amount and quality of helper who is gonna help you out. :)

– Jonathan Gagne
Nov 14 '18 at 19:34

@JonathanGagne thanks for that recommendation. I don't know how to use the snippet feature. I will try looking for it now

– SCodeSK71
Nov 14 '18 at 19:35

Inside the edit box tool bar, there is a button named Snippet. Click on it and split your html code into the html code block, the css code into the css part and then you can take a look on the end result by clicking on Run. If the result satisfy you, click on Save and write down your question before and/or after the snippet code block.

– Jonathan Gagne
Nov 14 '18 at 19:38

@JonathanGagne I was able to add a Snippet! Thanks for recommending it - hopefully I can find a solution now

– SCodeSK71
Nov 14 '18 at 19:48

My pleasure!!! Thank you for making Stack Overflow a better place to live where people are nice and smart ;)

– Jonathan Gagne
Nov 14 '18 at 19:59

add a comment |

2 Answers
2

active

oldest

votes

The problem here is that "words" is extending off the bottom of the page. For scrolling to work like that on div tag you need to give it a static height, otherwise, the div will automatically adjust to the height of it's content and behave just like a normal div tag.

To make it responsive, you will need to use screen.height; in javaScript to get your total screen height, then subtract heights of your header and footer areas, and then set the div tag's height using the result. For best results, use something like window.setInterval(setWordsHeight(), 100); to recheck the height of the screen on an interval so that it does not get messed up if someone resizes their window.

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

edited Nov 14 '18 at 22:55

answered Nov 14 '18 at 19:39

Nosajimiki

7421613

Thank you for your suggestions @Nosjimiki. I am not too well versed in java. Can you give me a working code I can paste into mine using your example so I can test it's responsiveness?

– SCodeSK71
Nov 14 '18 at 20:05

Try this. You may need need to re-adjust your "headerFooterHeight" to whatever your exact margin is. Also, just so you know, Java and JavaScript are two completely different programming languages.

– Nosajimiki
Nov 14 '18 at 20:21

Will this work in all browsers? Would it be better to just add a second header like I am working on in @MartinBA's answer? I wouldn't want users to experience any issues with javascript if it's not universal on the average browser. (Thanks for letting me know the two were different languages).

– SCodeSK71
Nov 14 '18 at 20:47

Everything in this example should be cross platform compatible. The second header idea will become in issue if you have a really long list. The header is not actually making the scroll bar shorter, it's just hiding the top part of it; so, if you had a long list, it would hide the scroll bar controller and render it undraggable; so, I would not personally recommend that.

– Nosajimiki
Nov 14 '18 at 21:43

I pasted <script> var headerFooterHeight = 200; // Or whatever the total height of the header+footer is. function setWordsHeight() document.getElementById("words").style.height = (screen.height - headerFooterHeight)+"px"; window.setInterval(setWordsHeight(), 100); // this makes it recheck the size of the window every 100ms. </script> in my html and it did nothing

– SCodeSK71
Nov 14 '18 at 22:29

|
show 8 more comments

Delete the position: fixed; for #content

#content 
 padding: 60px 0;

and also the overflow-y: hidden; from body

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

And for the last delete overflow-y: scroll; from .words

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

That should solve your problem, let me know if that help!

Edit 1

So first of all we need to update the markup, let's create a new container div and give it the class .new-header, this needs to be outside the #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>

As you can see, inside the .new-header div you have all the information needed for the second header, and then you need to add this css

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

Now we need to give to the #content div more padding-top

#content 
 padding: 170px 0 60px 0;

Let me know if you have any problems applying this.

edited Nov 14 '18 at 20:51

answered Nov 14 '18 at 19:41

MartinBA

7161213

Good answer, but also remove overflow-y: scroll; from words so that you don't get the second unusable scrollbar.

– Nosajimiki
Nov 14 '18 at 19:45

That's true, just edited the answer, thank you!

– MartinBA
Nov 14 '18 at 19:48

@MartinBA, first of all thank you for your suggestions. This makes the entire content area scroll in between the header and footer. That's not what I want. I only want the div class: words to scroll. Can you make that possible?

– SCodeSK71
Nov 14 '18 at 19:52

In that case, you need my answer. You need to give your div a set height.

– Nosajimiki
Nov 14 '18 at 19:55

1

@SCodeSK71 Yes I can, slow day at work, give me couple of minutes and I will edit the answer.

– MartinBA
Nov 14 '18 at 20:36

|
show 12 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307521%2fcss-js-make-only-one-of-the-divs-resize-scroll-to-fixed-footer%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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

edited Nov 14 '18 at 22:55

answered Nov 14 '18 at 19:39

Nosajimiki

7421613

Thank you for your suggestions @Nosjimiki. I am not too well versed in java. Can you give me a working code I can paste into mine using your example so I can test it's responsiveness?

– SCodeSK71
Nov 14 '18 at 20:05

Try this. You may need need to re-adjust your "headerFooterHeight" to whatever your exact margin is. Also, just so you know, Java and JavaScript are two completely different programming languages.

– Nosajimiki
Nov 14 '18 at 20:21

Will this work in all browsers? Would it be better to just add a second header like I am working on in @MartinBA's answer? I wouldn't want users to experience any issues with javascript if it's not universal on the average browser. (Thanks for letting me know the two were different languages).

– SCodeSK71
Nov 14 '18 at 20:47

Everything in this example should be cross platform compatible. The second header idea will become in issue if you have a really long list. The header is not actually making the scroll bar shorter, it's just hiding the top part of it; so, if you had a long list, it would hide the scroll bar controller and render it undraggable; so, I would not personally recommend that.

– Nosajimiki
Nov 14 '18 at 21:43

I pasted <script> var headerFooterHeight = 200; // Or whatever the total height of the header+footer is. function setWordsHeight() document.getElementById("words").style.height = (screen.height - headerFooterHeight)+"px"; window.setInterval(setWordsHeight(), 100); // this makes it recheck the size of the window every 100ms. </script> in my html and it did nothing

– SCodeSK71
Nov 14 '18 at 22:29

|
show 8 more comments

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

edited Nov 14 '18 at 22:55

answered Nov 14 '18 at 19:39

Nosajimiki

7421613

Thank you for your suggestions @Nosjimiki. I am not too well versed in java. Can you give me a working code I can paste into mine using your example so I can test it's responsiveness?

– SCodeSK71
Nov 14 '18 at 20:05

Try this. You may need need to re-adjust your "headerFooterHeight" to whatever your exact margin is. Also, just so you know, Java and JavaScript are two completely different programming languages.

– Nosajimiki
Nov 14 '18 at 20:21

Will this work in all browsers? Would it be better to just add a second header like I am working on in @MartinBA's answer? I wouldn't want users to experience any issues with javascript if it's not universal on the average browser. (Thanks for letting me know the two were different languages).

– SCodeSK71
Nov 14 '18 at 20:47

Everything in this example should be cross platform compatible. The second header idea will become in issue if you have a really long list. The header is not actually making the scroll bar shorter, it's just hiding the top part of it; so, if you had a long list, it would hide the scroll bar controller and render it undraggable; so, I would not personally recommend that.

– Nosajimiki
Nov 14 '18 at 21:43

I pasted <script> var headerFooterHeight = 200; // Or whatever the total height of the header+footer is. function setWordsHeight() document.getElementById("words").style.height = (screen.height - headerFooterHeight)+"px"; window.setInterval(setWordsHeight(), 100); // this makes it recheck the size of the window every 100ms. </script> in my html and it did nothing

– SCodeSK71
Nov 14 '18 at 22:29

|
show 8 more comments

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

edited Nov 14 '18 at 22:55

answered Nov 14 '18 at 19:39

Nosajimiki

7421613

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

edited Nov 14 '18 at 22:55

answered Nov 14 '18 at 19:39

Nosajimiki

7421613

edited Nov 14 '18 at 22:55

answered Nov 14 '18 at 19:39

Nosajimiki

7421613

answered Nov 14 '18 at 19:39

Nosajimiki

7421613

answered Nov 14 '18 at 19:39

Nosajimiki

7421613

Thank you for your suggestions @Nosjimiki. I am not too well versed in java. Can you give me a working code I can paste into mine using your example so I can test it's responsiveness?

– SCodeSK71
Nov 14 '18 at 20:05

Try this. You may need need to re-adjust your "headerFooterHeight" to whatever your exact margin is. Also, just so you know, Java and JavaScript are two completely different programming languages.

– Nosajimiki
Nov 14 '18 at 20:21

Will this work in all browsers? Would it be better to just add a second header like I am working on in @MartinBA's answer? I wouldn't want users to experience any issues with javascript if it's not universal on the average browser. (Thanks for letting me know the two were different languages).

– SCodeSK71
Nov 14 '18 at 20:47

Everything in this example should be cross platform compatible. The second header idea will become in issue if you have a really long list. The header is not actually making the scroll bar shorter, it's just hiding the top part of it; so, if you had a long list, it would hide the scroll bar controller and render it undraggable; so, I would not personally recommend that.

– Nosajimiki
Nov 14 '18 at 21:43

I pasted <script> var headerFooterHeight = 200; // Or whatever the total height of the header+footer is. function setWordsHeight() document.getElementById("words").style.height = (screen.height - headerFooterHeight)+"px"; window.setInterval(setWordsHeight(), 100); // this makes it recheck the size of the window every 100ms. </script> in my html and it did nothing

– SCodeSK71
Nov 14 '18 at 22:29

|
show 8 more comments

Thank you for your suggestions @Nosjimiki. I am not too well versed in java. Can you give me a working code I can paste into mine using your example so I can test it's responsiveness?

– SCodeSK71
Nov 14 '18 at 20:05

Try this. You may need need to re-adjust your "headerFooterHeight" to whatever your exact margin is. Also, just so you know, Java and JavaScript are two completely different programming languages.

– Nosajimiki
Nov 14 '18 at 20:21

Will this work in all browsers? Would it be better to just add a second header like I am working on in @MartinBA's answer? I wouldn't want users to experience any issues with javascript if it's not universal on the average browser. (Thanks for letting me know the two were different languages).

– SCodeSK71
Nov 14 '18 at 20:47

Everything in this example should be cross platform compatible. The second header idea will become in issue if you have a really long list. The header is not actually making the scroll bar shorter, it's just hiding the top part of it; so, if you had a long list, it would hide the scroll bar controller and render it undraggable; so, I would not personally recommend that.

– Nosajimiki
Nov 14 '18 at 21:43

I pasted <script> var headerFooterHeight = 200; // Or whatever the total height of the header+footer is. function setWordsHeight() document.getElementById("words").style.height = (screen.height - headerFooterHeight)+"px"; window.setInterval(setWordsHeight(), 100); // this makes it recheck the size of the window every 100ms. </script> in my html and it did nothing

– SCodeSK71
Nov 14 '18 at 22:29

Thank you for your suggestions @Nosjimiki. I am not too well versed in java. Can you give me a working code I can paste into mine using your example so I can test it's responsiveness?

– SCodeSK71
Nov 14 '18 at 20:05

Try this. You may need need to re-adjust your "headerFooterHeight" to whatever your exact margin is. Also, just so you know, Java and JavaScript are two completely different programming languages.

– Nosajimiki
Nov 14 '18 at 20:21

Will this work in all browsers? Would it be better to just add a second header like I am working on in @MartinBA's answer? I wouldn't want users to experience any issues with javascript if it's not universal on the average browser. (Thanks for letting me know the two were different languages).

– SCodeSK71
Nov 14 '18 at 20:47

Everything in this example should be cross platform compatible. The second header idea will become in issue if you have a really long list. The header is not actually making the scroll bar shorter, it's just hiding the top part of it; so, if you had a long list, it would hide the scroll bar controller and render it undraggable; so, I would not personally recommend that.

– Nosajimiki
Nov 14 '18 at 21:43

I pasted

<script> var headerFooterHeight = 200; // Or whatever the total height of the header+footer is. function setWordsHeight() document.getElementById("words").style.height = (screen.height - headerFooterHeight)+"px"; window.setInterval(setWordsHeight(), 100); // this makes it recheck the size of the window every 100ms. </script>

in my html and it did nothing

– SCodeSK71
Nov 14 '18 at 22:29

I pasted

<script> var headerFooterHeight = 200; // Or whatever the total height of the header+footer is. function setWordsHeight() document.getElementById("words").style.height = (screen.height - headerFooterHeight)+"px"; window.setInterval(setWordsHeight(), 100); // this makes it recheck the size of the window every 100ms. </script>

in my html and it did nothing

– SCodeSK71
Nov 14 '18 at 22:29

|
show 8 more comments

Delete the position: fixed; for #content

#content 
 padding: 60px 0;

and also the overflow-y: hidden; from body

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

And for the last delete overflow-y: scroll; from .words

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

That should solve your problem, let me know if that help!

Edit 1

So first of all we need to update the markup, let's create a new container div and give it the class .new-header, this needs to be outside the #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>

As you can see, inside the .new-header div you have all the information needed for the second header, and then you need to add this css

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

Now we need to give to the #content div more padding-top

#content 
 padding: 170px 0 60px 0;

Let me know if you have any problems applying this.

edited Nov 14 '18 at 20:51

answered Nov 14 '18 at 19:41

MartinBA

7161213

Good answer, but also remove overflow-y: scroll; from words so that you don't get the second unusable scrollbar.

– Nosajimiki
Nov 14 '18 at 19:45

That's true, just edited the answer, thank you!

– MartinBA
Nov 14 '18 at 19:48

@MartinBA, first of all thank you for your suggestions. This makes the entire content area scroll in between the header and footer. That's not what I want. I only want the div class: words to scroll. Can you make that possible?

– SCodeSK71
Nov 14 '18 at 19:52

In that case, you need my answer. You need to give your div a set height.

– Nosajimiki
Nov 14 '18 at 19:55

1

@SCodeSK71 Yes I can, slow day at work, give me couple of minutes and I will edit the answer.

– MartinBA
Nov 14 '18 at 20:36

|
show 12 more comments

Delete the position: fixed; for #content

#content 
 padding: 60px 0;

and also the overflow-y: hidden; from body

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

And for the last delete overflow-y: scroll; from .words

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

That should solve your problem, let me know if that help!

Edit 1

So first of all we need to update the markup, let's create a new container div and give it the class .new-header, this needs to be outside the #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>

As you can see, inside the .new-header div you have all the information needed for the second header, and then you need to add this css

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

Now we need to give to the #content div more padding-top

#content 
 padding: 170px 0 60px 0;

Let me know if you have any problems applying this.

edited Nov 14 '18 at 20:51

answered Nov 14 '18 at 19:41

MartinBA

7161213

Good answer, but also remove overflow-y: scroll; from words so that you don't get the second unusable scrollbar.

– Nosajimiki
Nov 14 '18 at 19:45

That's true, just edited the answer, thank you!

– MartinBA
Nov 14 '18 at 19:48

@MartinBA, first of all thank you for your suggestions. This makes the entire content area scroll in between the header and footer. That's not what I want. I only want the div class: words to scroll. Can you make that possible?

– SCodeSK71
Nov 14 '18 at 19:52

In that case, you need my answer. You need to give your div a set height.

– Nosajimiki
Nov 14 '18 at 19:55

1

@SCodeSK71 Yes I can, slow day at work, give me couple of minutes and I will edit the answer.

– MartinBA
Nov 14 '18 at 20:36

|
show 12 more comments

Delete the position: fixed; for #content

#content 
 padding: 60px 0;

and also the overflow-y: hidden; from body

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

And for the last delete overflow-y: scroll; from .words

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

That should solve your problem, let me know if that help!

Edit 1

So first of all we need to update the markup, let's create a new container div and give it the class .new-header, this needs to be outside the #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>

As you can see, inside the .new-header div you have all the information needed for the second header, and then you need to add this css

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

Now we need to give to the #content div more padding-top

#content 
 padding: 170px 0 60px 0;

Let me know if you have any problems applying this.

edited Nov 14 '18 at 20:51

answered Nov 14 '18 at 19:41

MartinBA

7161213

Delete the position: fixed; for #content

#content 
 padding: 60px 0;

and also the overflow-y: hidden; from body

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

And for the last delete overflow-y: scroll; from .words

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

That should solve your problem, let me know if that help!

Edit 1

So first of all we need to update the markup, let's create a new container div and give it the class .new-header, this needs to be outside the #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>

As you can see, inside the .new-header div you have all the information needed for the second header, and then you need to add this css

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

Now we need to give to the #content div more padding-top

#content 
 padding: 170px 0 60px 0;

Let me know if you have any problems applying this.

edited Nov 14 '18 at 20:51

answered Nov 14 '18 at 19:41

MartinBA

7161213

edited Nov 14 '18 at 20:51

answered Nov 14 '18 at 19:41

MartinBA

7161213

answered Nov 14 '18 at 19:41

MartinBA

7161213

answered Nov 14 '18 at 19:41

MartinBA

7161213

Good answer, but also remove overflow-y: scroll; from words so that you don't get the second unusable scrollbar.

– Nosajimiki
Nov 14 '18 at 19:45

That's true, just edited the answer, thank you!

– MartinBA
Nov 14 '18 at 19:48

@MartinBA, first of all thank you for your suggestions. This makes the entire content area scroll in between the header and footer. That's not what I want. I only want the div class: words to scroll. Can you make that possible?

– SCodeSK71
Nov 14 '18 at 19:52

In that case, you need my answer. You need to give your div a set height.

– Nosajimiki
Nov 14 '18 at 19:55

1

@SCodeSK71 Yes I can, slow day at work, give me couple of minutes and I will edit the answer.

– MartinBA
Nov 14 '18 at 20:36

|
show 12 more comments

Good answer, but also remove overflow-y: scroll; from words so that you don't get the second unusable scrollbar.

– Nosajimiki
Nov 14 '18 at 19:45

That's true, just edited the answer, thank you!

– MartinBA
Nov 14 '18 at 19:48

@MartinBA, first of all thank you for your suggestions. This makes the entire content area scroll in between the header and footer. That's not what I want. I only want the div class: words to scroll. Can you make that possible?

– SCodeSK71
Nov 14 '18 at 19:52

In that case, you need my answer. You need to give your div a set height.

– Nosajimiki
Nov 14 '18 at 19:55

1

@SCodeSK71 Yes I can, slow day at work, give me couple of minutes and I will edit the answer.

– MartinBA
Nov 14 '18 at 20:36

Good answer, but also remove overflow-y: scroll; from words so that you don't get the second unusable scrollbar.

– Nosajimiki
Nov 14 '18 at 19:45

That's true, just edited the answer, thank you!

– MartinBA
Nov 14 '18 at 19:48

@MartinBA, first of all thank you for your suggestions. This makes the entire content area scroll in between the header and footer. That's not what I want. I only want the div class: words to scroll. Can you make that possible?

– SCodeSK71
Nov 14 '18 at 19:52

In that case, you need my answer. You need to give your div a set height.

– Nosajimiki
Nov 14 '18 at 19:55

@SCodeSK71 Yes I can, slow day at work, give me couple of minutes and I will edit the answer.

– MartinBA
Nov 14 '18 at 20:36

|
show 12 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb