Arrangement of div elements tailored to fit the size of the viewport

Question

Arrangement of div elements tailored to fit the size of the viewport

I am working on creating a grid of divs that will cover the entire viewport. To start, I want to have a grid that is 7 divs wide and 10 divs high.

Below is the code snippet I've written so far to set the size of the div elements:

function adjustHeight() {
    var height = $(window).height();
    height = parseInt(height) + 'px';
    $(".page").css('height', height);
}
$(document).ready(function() {
    adjustHeight();
    $(window).bind('resize', adjustHeight);
});

function adjustWidth() {
    var width = $(window).width();
    width = parseInt(width) + 'px';
    $(".page").css('width', width);
}
$(document).ready(function() {
    adjustWidth();
    $(window).bind('width', adjustWidth);
});

Currently, I have two divs stacked on top of each other, one in red and the other in black for visibility. Next, I plan to add content inside these divs. Additionally, I made sure to include the following CSS rule:

body {
    margin: 0px;
}

In the future, I intend to incorporate scrolling features using jQuery. But for now, my main focus is on setting up the grid layout as desired.

Edit: Each individual div should be the size of the viewport.

Edit: I found this handy plugin for scrolling, which offers more functionality than a simple script placed at the end of the page.

javascript jquery html css

Answer 1

Answer №1

To achieve this effect, you can rely solely on CSS without the need for any JavaScript.

HTML

<div id="content1">
  Place your content here.
</div>
<div id="content2">
  Place your content here.
</div>
<div id="content3">
  Place your content here.
</div>

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content1,#content2,#content3 {
  min-height: 100%;
  height: auto !important; /*min-height hack*/
  height: 100%;            /*min-height hack*/
}

EXAMPLE 1

All 3 divs will fill the size of the browser window and adapt accordingly. Additionally, you can include anchor links to navigate between tabs using only HTML and CSS.

<a href="#content1">Go to Main Element</a>

If you would like a navigation setup similar to this, consider checking out

EXAMPLE 2

In the example provided, different colors have been applied to the boxes by separating the CSS code, but it can be consolidated as initially shown.

I've also prepared another fiddle with improvements over the previous versions. You requested both vertical and horizontal sets of divs.

EXAMPLE 3

This demonstration showcases 3x2 divs (6 in total), but the same approach can be extended to create larger grids. Feel free to ask if any part of the code is unclear.

Additionally, I've included some jQuery for smoother scrolling, which is optional and can be removed if not needed.

JavaScript (ensure jQuery is included)

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
       scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});

Hope this guidance proves useful to you

EDIT: Remember to integrate jQuery into your code and wrap the JavaScript snippet with:

$(window).load(function(){

});

Answer 2

To achieve this effect, you can rely solely on CSS without the need for any JavaScript.

HTML

<div id="content1">
  Place your content here.
</div>
<div id="content2">
  Place your content here.
</div>
<div id="content3">
  Place your content here.
</div>

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content1,#content2,#content3 {
  min-height: 100%;
  height: auto !important; /*min-height hack*/
  height: 100%;            /*min-height hack*/
}

EXAMPLE 1

All 3 divs will fill the size of the browser window and adapt accordingly. Additionally, you can include anchor links to navigate between tabs using only HTML and CSS.

<a href="#content1">Go to Main Element</a>

If you would like a navigation setup similar to this, consider checking out

EXAMPLE 2

In the example provided, different colors have been applied to the boxes by separating the CSS code, but it can be consolidated as initially shown.

I've also prepared another fiddle with improvements over the previous versions. You requested both vertical and horizontal sets of divs.

EXAMPLE 3

This demonstration showcases 3x2 divs (6 in total), but the same approach can be extended to create larger grids. Feel free to ask if any part of the code is unclear.

Additionally, I've included some jQuery for smoother scrolling, which is optional and can be removed if not needed.

JavaScript (ensure jQuery is included)

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
       scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});

Hope this guidance proves useful to you

EDIT: Remember to integrate jQuery into your code and wrap the JavaScript snippet with:

$(window).load(function(){

});

Answer 3

Answer №2

It's a bit unclear whether you're looking to make the entire div cover the screen and then have overflow scrolling into the next panel, or if you want a grid of divs that fit within the viewport. If it's the latter, here's my solution.

Check out the fiddle here:

HTML

<div class="box">01</div>
<div class="box">02</div>
<div class="box">03</div>
<div class="box">04</div>
<div class="box">05</div>
<div class="box">06</div>
<div class="box">07</div>
<div class="box">etc. (up to 70)</div>

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    margin: 0;
} 

html {
    height: 100%;
    background-color: green;
}

body {
    height: 100%;
    border: 1px solid red;
}

.box {
    width: 14.285714%%; /* 100/7 */
    float: left;
    height: 10%; /* 100/10 */
    border: 1px solid rgba(255,255,255,.5);
}

If the above isn't what you had in mind, maybe this alternative will work for you.

View alternative fiddle here:

HTML

<div id="content1" class="box">
    <h2>block 01</h2>
</div>

<div id="content2" class="box">
    <h2>block 02</h2>
</div>

<div id="content3" class="box">
    <h2>block 03</h2>
</div>

<div id="content4" class="box">
    <h2>block 04</h2>
</div>

<div id="content5" class="box">
    <h2>block 05</h2>
</div>

<div id="content6" class="box">
    <h2>block 06</h2>
</div>

<div id="content7" class="box">
    <h2>block 07</h2>
</div>

<div id="content8" class="box">
    <h2>block 08</h2>
</div>

<!-- Repeat up to 70... ? -->

<nav class="global-nav">
    <a href="#content1">01</a>
    <a href="#content2">02</a>
    <a href="#content3">03</a>
    <a href="#content4">04</a>
    <a href="#content5">05</a>
    <a href="#content6">06</a>
    <a href="#content7">07</a>
    <a href="#content8">08</a>
</nav>

CSS (includes SASS for efficiency)

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    margin: 0;
}

html, body {
    height: 100%;
}

html {
    width: 700%;
    /* overflow: hidden; */
    /* Scroll bars are visible for demonstration purposes */
}

.box {
    min-height: 100%;
    height: auto !important; /*min-height hack*/
    height: 100%;            /*min-height hack*/

    width: 100%/7;       /* Quick SASS division */
    float: left;
    border: 1px solid blue;
}

.global-nav {
    position: fixed;
    bottom: 0;
    left: 0;
}

.global-nav a {
    display: block;
    color: black;
}

Answer 4

It's a bit unclear whether you're looking to make the entire div cover the screen and then have overflow scrolling into the next panel, or if you want a grid of divs that fit within the viewport. If it's the latter, here's my solution.

Check out the fiddle here:

HTML

<div class="box">01</div>
<div class="box">02</div>
<div class="box">03</div>
<div class="box">04</div>
<div class="box">05</div>
<div class="box">06</div>
<div class="box">07</div>
<div class="box">etc. (up to 70)</div>

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    margin: 0;
} 

html {
    height: 100%;
    background-color: green;
}

body {
    height: 100%;
    border: 1px solid red;
}

.box {
    width: 14.285714%%; /* 100/7 */
    float: left;
    height: 10%; /* 100/10 */
    border: 1px solid rgba(255,255,255,.5);
}

If the above isn't what you had in mind, maybe this alternative will work for you.

View alternative fiddle here:

HTML

<div id="content1" class="box">
    <h2>block 01</h2>
</div>

<div id="content2" class="box">
    <h2>block 02</h2>
</div>

<div id="content3" class="box">
    <h2>block 03</h2>
</div>

<div id="content4" class="box">
    <h2>block 04</h2>
</div>

<div id="content5" class="box">
    <h2>block 05</h2>
</div>

<div id="content6" class="box">
    <h2>block 06</h2>
</div>

<div id="content7" class="box">
    <h2>block 07</h2>
</div>

<div id="content8" class="box">
    <h2>block 08</h2>
</div>

<!-- Repeat up to 70... ? -->

<nav class="global-nav">
    <a href="#content1">01</a>
    <a href="#content2">02</a>
    <a href="#content3">03</a>
    <a href="#content4">04</a>
    <a href="#content5">05</a>
    <a href="#content6">06</a>
    <a href="#content7">07</a>
    <a href="#content8">08</a>
</nav>

CSS (includes SASS for efficiency)

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    margin: 0;
}

html, body {
    height: 100%;
}

html {
    width: 700%;
    /* overflow: hidden; */
    /* Scroll bars are visible for demonstration purposes */
}

.box {
    min-height: 100%;
    height: auto !important; /*min-height hack*/
    height: 100%;            /*min-height hack*/

    width: 100%/7;       /* Quick SASS division */
    float: left;
    border: 1px solid blue;
}

.global-nav {
    position: fixed;
    bottom: 0;
    left: 0;
}

.global-nav a {
    display: block;
    color: black;
}

Arrangement of div elements tailored to fit the size of the viewport

Answer №1

Answer №2

HTML

CSS

If the above isn't what you had in mind, maybe this alternative will work for you.

HTML

CSS (includes SASS for efficiency)

Similar questions

Despite making changes, the React Element continues to be rendered

What is the best method for eliminating buttons and text in a row using CSS?

What is the most effective method for animating an image to move along a circular path using JQuery?

Access your account using Google authentication within an Angular framework

Passing arguments to EJS view with Express

Creating a custom progress bar using Javascript and Jquery

Issues with user-generated input not properly functioning within a react form hook

The program encountered an unexpected identifier 'getProject' instead of ';'. It was expecting to find a semicolon after the async variable declaration

Are there any solutions for the malfunctioning v8 date parser?

Next.js version 14 is having difficulties displaying the loading.tsx file

Disabling the ESC key from clearing input fields in Bootstrap-5: A step-by-step guide

Guide to setting up FullCalendar views based on unique identifiers

I'm encountering an error when trying to return a value using the question mark operator in Vue.js - can someone explain why

Disappearing Jquery mobile panel following a postback

Issues with vue-moment.js in Vue

Adjust the appearance of a specific element

Unable to successfully create a dynamic anchor tag and open it in a new tab

Dealing with errors in Express.js within the service or controller layers

Adapting Classes in Javascript Based on Screen Width: A Step-by-Step Guide

AngularJS postback method fails to trigger