Creating a responsive layout that sets the window height to 100% and automatically adjusts sibling divs when the content within parent divs exceeds the defined height

Question

Creating a responsive layout that sets the window height to 100% and automatically adjusts sibling divs when the content within parent divs exceeds the defined height

<section>
   <div class="section-wrap">
     <h1>page1</h1>
   </div>
</section> 
<section>
   <div class="section-wrap">
    <h1>page2</h1>
   </div>
</section>

My attempt at implementing javascript only functions properly when the content of a div is less than the specified height.

 <script type="text/javascript">
    $(function(){
    var windowH = $(window).height();
    var wrapperH = $('section').height();
    if(windowH > wrapperH) {                            
        $('section').css({'height':($(window).height())+'px'});
    }                                                                               
    $(window).resize(function(){
        var windowH = $(window).height();
        var wrapperH = $('section').height();
        var differenceH = windowH - wrapperH;
        var newH = wrapperH + differenceH;
        var truecontentH = $('.section-wrap').height();
        if(windowH > truecontentH) {
            $('section').css('height', (newH)+'px');
        }

    })          
});
    </script>

javascript jquery html css twitter-bootstrap-3

Answer 1

Answer №1

If you want to ensure that section elements always have a minimum height equal to the viewport size, you can achieve this with the following CSS:

section {
    min-height: 100vh;
}

This technique is widely supported, with even Internet Explorer offering support from version 9 onwards. However, it's worth noting that mobile Safari in iOS 7 may encounter some bugs.

To address any issues with mobile Safari, you can consider using JavaScript. This could involve implementing a polyfill or a workaround like the one below:

jQuery(document).ready(function() {
    jQuery(window).on('resize orientationchange', function() {
        var windowHeight = jQuery(window).height();
        jQuery('section').css('min-height', windowHeight + 'px');
    });
});

Keep in mind that this solution relies on JavaScript and may not work without it. Additionally, it might impose a certain level of computational overhead.

An alternative approach involves integrating specific height rules directly into your CSS:

@media (min-height: 1000px) {
    section {
        min-height: 1000px;
    }
}

@media (min-height: 1010px) {
    section {
        min-height: 1010px;
    }
}

// Similar rules for other heights.

The drawback here lies in the maintenance aspect, as you would need to create numerous rules. To streamline this process, you could utilize a CSS preprocessor like LESS, which allows for a more elegant solution as shown below:

.min-height-100vh(@height) when @height > 0 {
    @media (min-height: @height) {
        min-height: @height;
    }

    .min-height-100vh(@height - 10px);
}

section {
    .min-height-100vh(3000px);
}

By leveraging this method, approximately 300 media queries would be generated. While this may increase stylesheet size and demand additional processing power, it offers a more efficient approach to managing height variations.

Answer 2

If you want to ensure that section elements always have a minimum height equal to the viewport size, you can achieve this with the following CSS:

section {
    min-height: 100vh;
}

This technique is widely supported, with even Internet Explorer offering support from version 9 onwards. However, it's worth noting that mobile Safari in iOS 7 may encounter some bugs.

To address any issues with mobile Safari, you can consider using JavaScript. This could involve implementing a polyfill or a workaround like the one below:

jQuery(document).ready(function() {
    jQuery(window).on('resize orientationchange', function() {
        var windowHeight = jQuery(window).height();
        jQuery('section').css('min-height', windowHeight + 'px');
    });
});

Keep in mind that this solution relies on JavaScript and may not work without it. Additionally, it might impose a certain level of computational overhead.

An alternative approach involves integrating specific height rules directly into your CSS:

@media (min-height: 1000px) {
    section {
        min-height: 1000px;
    }
}

@media (min-height: 1010px) {
    section {
        min-height: 1010px;
    }
}

// Similar rules for other heights.

The drawback here lies in the maintenance aspect, as you would need to create numerous rules. To streamline this process, you could utilize a CSS preprocessor like LESS, which allows for a more elegant solution as shown below:

.min-height-100vh(@height) when @height > 0 {
    @media (min-height: @height) {
        min-height: @height;
    }

    .min-height-100vh(@height - 10px);
}

section {
    .min-height-100vh(3000px);
}

By leveraging this method, approximately 300 media queries would be generated. While this may increase stylesheet size and demand additional processing power, it offers a more efficient approach to managing height variations.

Answer 3

Answer №2

Thank you all for your help! I was able to find the solution that worked perfectly on IE8+ and across all browsers, including mobile devices.

html,
body {
  height: 100%;
}
section {
  min-height: 100%;
}

<body>
  <section>
    <h1>section 1</h1>
  </section>
  <section>
    <h1>section 2</h1>
  </section>
</body>

Answer 4

Thank you all for your help! I was able to find the solution that worked perfectly on IE8+ and across all browsers, including mobile devices.

html,
body {
  height: 100%;
}
section {
  min-height: 100%;
}

<body>
  <section>
    <h1>section 1</h1>
  </section>
  <section>
    <h1>section 2</h1>
  </section>
</body>

Creating a responsive layout that sets the window height to 100% and automatically adjusts sibling divs when the content within parent divs exceeds the defined height

Answer №1

Answer №2

Similar questions

How can we improve our vertical division method?

What is the best way to divide this string with jQuery?

Exploring network connectivity using Node.js

Retrieving HTML content using scriptJS

Angular dependency injection function

Declaring a variable outside of a function or object

The function is not defined after the button is clicked when an if-else statement is added to the

Customize the look and feel of your website using jQuery's

Can ng-submit be overridden?

Incorporating external script into React website's functional component

Displaying the second div once the first div has loaded, then concealing the first div

Unable to forward with POST request in Node.js

The local HTTP server is having trouble establishing a connection with the Firebase user

Create an array of arrays within a loop using TypeScript

Using PHP, show a specific table row when clicked by matching the ID

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

Best practice for stopping routing in angular

Align Text with Icon Using FontAwesome

Perform the action: insert a new item into an array belonging to a model

DreamFactory's REST API POST request for rest/user/session consistently encounters errors in Internet Explorer 9