Three Divisions Positioned at the Top, Middle, and Bottom

I need to place 3 divs at the top, middle, and bottom positions.

To achieve this, I have used jQuery to calculate the viewport height and apply a percentage of it to the top and bottom divs. However, resizing the page causes issues as the middle div overlaps either the top or bottom div. It is important for me to maintain a margin of around 10px for the middle div, as shown in the picture provided.

Below is the JavaScript code I am currently using:

$(document).ready(function() {

    function thirty_pc() {
        var height = $(window).innerHeight();
        var thirtypc = (40 * height) / 100;
        thirtypc = parseInt(thirtypc) + 'px';
        $(".botline, .topline").css('height', thirtypc);
    }

    $(document).ready(function() {
        thirty_pc();
        $(window).bind('resize', thirty_pc);
    });

});

I would like to know if there is a way to achieve the same result using CSS or jQuery more effectively.

I appreciate any assistance you can provide. Thank you.

jqueryhtmlcss

Answer №1

DEMO

Give flexbox a try for your layout. It's a pure CSS solution that works seamlessly on all modern browsers. Check out this flexbox guide to get started.

HTML Code

<div id="mainFlex">
    <div id="box1">❶</div>
    <div id="box2">❷</div>
    <div id="box3">❸</div>
</div>

CSS Code

    div {
    border: 3px solid red;
    margin: 10px;
}
#mainFlex {
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-pack: center;
    box-pack: center;
    -webkit-box-direction: normal;
    box-direction: normal;
    -webkit-box-align: stretch;
    ox-align: stretch;
    border: 1px dashed blue;
}
#box1 {
    -webkit-box-ordinal-group: 1;
    box-ordinal-group: 1;
    -webkit-box-flex: 0;
    box-flex: 0;
    height: auto;
    min-height: 100px;
}
#box2 {
    -webkit-box-ordinal-group: 2;
    box-ordinal-group: 2;
    -webkit-box-flex: 0;
    box-flex: 0;
    height: 100px;
}
#box3 {
    -webkit-box-ordinal-group: 3;
    box-ordinal-group: 3;
    -webkit-box-flex: 0;
    box-flex: 0;
    height: auto;
    min-height: 100px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React Bootstrap's drop-down components with a dark theme

In my react application, I am looking to design a custom navbar for the header using react-bootstrap. Specifically, I need a dark styled NavDropdown that changes background color to #f0ad4e on hover. Despite attempting the following code snippet, I couldn& ...

cssreactjsreact-bootstrap

An issue with type conversion arises in Visual Basic when trying to access data from an HTML

I'm currently working with an HTML table that allows for dynamically adding and deleting rows with text-input's in the cells using JavaScript. Instead of ASP.NET TextBox controls, I am sticking to traditional HTML because I believe rows containin ...

htmlasp.netvb.net

The onblur function is not being triggered

Recently, I encountered an issue while trying to invoke a JavaScript function onblur of a field. The main problems I faced were: 1) The popup inside the function call was triggered automatically during page load. 2) When attempting to access the functio ...

javascriptjqueryangularjs

Problem encountered when trying to simulate a click on a table row in jQuery

DataTables v1.10.0: My challenge is with DataTables v1.10.0 where I am attempting to trigger a click event on the first row. Everything else in the table is functioning correctly. I experimented with adding a class instead of triggering the click event an ...

jquerydatatables

The functionality of the button is disabled once a pop-up JavaScript is implemented

I have encountered an issue with my HTML code that involves a button intended to hide certain content. The problem arose when I implemented a popup feature, causing the button to malfunction. Here is the JavaScript for the popup: $ = function(id) { retur ...

javascripthtml

What could be the reason that the height: auto property is not creating a content area big enough to accommodate my content

When a user is not logged in, the header displays a logo and a login form that requires ample space. Once the user logs in, the full navigation menu appears in a smaller header size. To achieve this, adjusting the height:auto property of the "site-header" ...

htmlcssruby-on-rails

Unable to view Ajax requests using Firebug when the header has been altered

Currently, I am making an ajax call using jQuery's library to interact with an API. This particular API demands a username and password encoded to base64 added to the header. Here is a simple example of how it is done: $.ajax({ type: "GET", ...

jqueryajaxhttp-headersbasic-authentication

Align the timing of the animation with the dataset in ThreeJS

I am faced with the challenge of working with data that includes time in milliseconds and the x, y, z position of an object at each specific time interval. msec |pos_x |pos_y |pos_z ------------------------------ 0 |318 |24 |3 25 |3 ...

javascripthtmlanimationtimethree.js

TinyMCE file multimedia upload feature allows users to easily add audio, video

I am looking to enhance the functionality of my TinyMCE Editor by enabling file uploads for audio/video and images. Although image uploading is functioning properly, I am encountering issues with other types of files. Despite setting up pickers throughout, ...

javascriptphpjqueryhtmltinymce

Attaching an External JSON Data File in JSFiddle

Can external JSON Data be linked within JSFiddle? Here is the code snippet I'm using to fetch the JSON Data: var xhr = new XMLHttpRequest(); xhr.open('GET', url: 'www.myurl.com/js/data/data.json', true); xhr.send(null); I have ...

javascriptjqueryjsonjsfiddle

Prevent PHP script from running during an AJAX request

Here is a brief overview of how my small application functions: users are prompted to input a URL into a simple text field. Upon any changes made to the input, my script attempts to extract and showcase the first 10 images found on that particular webpage. ...

phpjqueryajaximage

Resetting initial values with Velocity.js post-animation

After animating elements into view on a page, I want to defer further animation through CSS classes. However, Velocity keeps all animated properties in the style= tag, hindering CSS transitions. My solution involves resetting the CSS upon completion, but ...

javascriptjquerycssanimationvelocity.js

Which is better for handling events - jQuery delegation or function method?

Which approach is quicker and has broader browser support? 1. Utilizing a JavaScript function such as: function updateText(newtext) { $('div#id').text(newtext); } and incorporating it into an element's onclick event: <button onc ...

javascriptjqueryfunction

What is the preferred method for writing `*zoom: 1;` in CSS?

Trying to create my code, I decided to borrow some CSS files from older code. However, upon running yarn build I encountered several errors like: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] <stdin>:122:2: 122 │ * ...

css

Connect a responsive div to a main div

I'm relatively new to the world of Javascript, CSS, and HTML. Currently, I'm attempting to anchor a div to the center and bottom of its parent div. The parent div contains a responsive background image and my fa fa-arrow icon is correctly positi ...

javascripthtmlcss

Switch out the content when the button is clicked

Seeking a code snippet to enable clicking a button (Button labeled "Next") for replacing existing code on the page with new code. Current code below should be replaced, starting from the score counter section. Please excuse any messy code as I'm new a ...

javascripthtml

Ways to conceal a div using ng-hide

Is there a way to make a div disappear using ng-hide? I have this code and I'm trying to hide the div with id="ApagarNA". The code displays a table with values, but some rows contain N.A in all 4 columns, and I want to hide those specific rows. For e ...

htmlangularjs

CSS designed for small-screen laptops is also being utilized on iPads running Safari

To specifically target the iPad/Safari browser and accommodate some minor differences in appearance compared to windows/linux browsers, we are implementing the following HTML meta tag and style query: <meta name="viewport" content="width=device-width, ...

cssipadsafari

The CKEditor value is set to the result of the dropdown selection

I need to implement a dropdown feature on my form where the options correspond to titles of content in my database. Once an option is selected, I want the corresponding content to display in a CKEditor field. I'm attempting to achieve something simil ...

phpjavascriptjqueryckeditor

Using JavaScript on mobile devices to stream a camera feed to a server

Currently, we are developing an application that requires streaming video recordings to a server. The process flow is as follows: 1) Open a website and activate the primary camera 2) Commence streaming of the camera video to the server 3) Complete the task ...

javascriptjqueryvideo-streaminghtml5-videoopentok