Looking to design a div that adjusts to the browser window size while allowing content below to be visible as the user scrolls.
Preferably, the div should not be fixed, but rather adjust in size along with the browser window when resized.
I'm confident the solution is straightforward, but I'm drawing a blank at the moment.
Here's an example of the desired outcome.
To achieve this, simply set the height to 100%
Don't forget to also set html, body to 100% and all the parent elements of your div.
For instance, if your structure looks like this:
<body>
<div id="wrapper">
<div id="height100"></div>
</div>
<div id="content"></div>
Your CSS should resemble this:
html, body, #wrapper, #height100 {
height: 100%;
}
<div class='viewport'>
<ul>
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
</ul>
<div class='belowviewport'>Content</div>
<div>
body { margin: 0;}
.viewport{
position:absolute;
width:100%;
height:100%;
background: blue;
}
.belowviewport {
position:absolute;
width:100%;
top:100%;
height: 50px;
}
Here is the solution you've been searching for: http://codepen.io/ABrTz/
body {
height: 100%;
overflow: hidden;
}
div.wrapper {
height: 100%;
overflow: auto;
background: blue;
}
body, html{
height: 100%;
width: 100%;
margin: 0;
}
#container{
height: 100%;
width: 100%;
}
I'm deducting -1 from your score for this question. Please remember to search on Google before asking for help on common tasks.
One way to achieve this is by using jQuery:
function adjustSize() {
var $window = $(window),
$nav = $('nav'),
$content = $('#content');
$content.height($window.height() - $nav.height());
}
Note: You can also set a minimum height for the content div using CSS.
For those who prefer vanilla JavaScript, here is an alternative solution:
var win = window,
doc = document,
elem = doc.documentElement,
body = doc.getElementsByTagName('body')[0];
win.onload = adjustSize();
win.onresize = adjustSize();
function adjustSize() {
var navigation = doc.getElementById('nav'),
mainContent = doc.getElementById('content');
mainContent.style.height = (getWinHeight() - navigation.clientHeight) + 'px';
}
function getWinHeight() {
return win.innerHeight || elem.clientHeight || body.clientHeight;
}
Recently, I put together a website using the following script: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> function loadpage(page) { document.getElementById( ...
I need to take CSV data, display it to the user with input fields, and then update Json before converting everything to XML. Can I update Json using user inputs, or is there a different approach? $(document).ready(function() { $.getJSON( &apos ...
Within my angular application, there is an asset creator component designed for creating, displaying, and editing THREE.js 3D models. The goal was to implement a tree-view list to showcase the nested groups of meshes that constitute the selected model, alo ...
Currently, I am in the process of developing an Express App and encountering a challenge regarding the storage of the user's URL from which their AJAX request originated. In simpler terms, when a website, such as www.example.com, sends an HTTP request ...
CSS .nested-menu { .list-group-item { cursor: pointer; } .nested { list-style-type: none; } ul.submenu { height: 0; } & .expand { ul.submenu { ...
My goal is to create a seamless navigation experience between tabs. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/b ...
please provide a brief description of the image The issue I am facing is consistent across all mobile browsers, with the exception of Firefox. It also manifests in Windows Chrome devtools mode and when the device toolbar is activated. I came across a sim ...
Currently attempting to adjust the background color of a Grid section when the mouse enters. I've made some progress, but now I seem to be stuck. My current approach involves calling a function to update the background color on mouse enter. const [isS ...
I need to create a pyramid structure within a parent div utilizing 4 child divs. The first child should be centered, with the remaining children positioned below in a second row. <style> .parent { width: 100%; display: grid; grid-template-co ...
Is there a way to display an image in a CSS :before element? .withimage:before { content: url(path/to/image.svg); display: block; height: 20px; width: 20px; } I'm facing an issue where the height and width properties are applied to the eleme ...
Looking for a way to display a <div> element, including nested <div>s, based on the value of a variable. I'm currently using v-if, but open to better suggestions. I attempted wrapping the entire <div> in a <template v-if> as s ...
Recently, I've been trying to implement a view counter on my website, similar to what you see on YouTube. Currently, the number of views stands at 23. I managed to find some code that allows me to increment the view count every time I click on an imag ...
I'm new to this and still learning, so please bear with me. I'm having trouble linking my CSS file to my index.html document in order to create a black banner at the top of the page. I've tried opening it in both Chrome and Explorer but noth ...
I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...
When using Selenium Webdriver with Python, I am facing an issue clicking on the box that contains the text "24h". Here is my code snippet: from selenium import webdriver from PIL import Image from selenium.webdriver.chrome.service import Service import ti ...
I'm currently utilizing the angular-minicolors library () within an angular controller: angular.element("myelement").minicolors({ position: 'top left', change: function() { //custom code to run upon color change } }) Wh ...
I have a div that has been styled with a left-hand border, and it's causing me some trouble. You can view the styling here on Jsfiddle. Is there a way to remove just the left hand side border without affecting the rest of the design or creating an un ...
I have set up a basic router in my code and initialized it. Issue: I encountered an unexpected behavior when visiting the URL http://localhost/backbone1/#photos/5. Despite expecting an output from console.log() in the JavaScript console, nothing appears. ...
Take a look at this image. I need to position my 6 boxes on the 6 vertical lines above the image. I am struggling with applying different padding styles to my ng-repeat directive. Although I tried using [ng-class], it doesn't seem to work as expected. ...
I need to send a request to an external domain, ensuring that the parameter is correctly sent to a PHP file on the external server. However, I'm facing an issue where "request.responseText" always returns empty. Any assistance in this matter would be ...