How can I adjust the border position to display both stacked <div>s?

In my Bootstrap 5 website page, I have arranged two <div>s to appear stacked on top of each other.

The functionality of the page relies heavily on the visibility and size of the bottom <div>. Ensuring this is crucial for the overall design.

Some questions that arise:

  1. Would it be possible to dynamically adjust the height of these <div>s upon page load so that the border separating them is centered irrespective of the system being used?
  2. Is there a method to enable users to modify the position of this dividing line between the two <div>s, allowing them to interactively change the heights of both sections?

Explore the live CodePen example for reference: https://codepen.io/softcircuits/pen/mdGomeP

javascripthtmlcsstwitter-bootstrapbootstrap-5

Answer №1

Here's a straightforward method utilizing only CSS.

<div class="myDiv" id="div1"></div>
<div class="myDiv" id="div2"></div>

html, body {
    margin: 0;
}

.myDiv {
    border: 2px solid black;
    height: 50vh;
    box-sizing: border-box;
    /* min-height: 200px; */
    resize: vertical;
    overflow: auto;
}

#div1 {
    background-color: cornflowerblue;
}

#div2 {
    background-color: crimson;
}

Query 1:

To center the border between them, set each div's height to half of the viewport using the vh unit. vh represents the browser's viewport height.

Setting height: 50vh adjusts the content height rather than the entire div, so include box-sizing: border-box to account for padding and border thickness, making the full height 50vh.

Learn more about the box-sizing property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Add min-height as needed to prevent the divs from becoming too small.

Query 2:

To enable user resizing, add:

resize: vertical;
overflow: auto;

More on the resize property: https://developer.mozilla.org/en-US/docs/Web/CSS/resize

If this doesn't address your question #2, feel free to provide further details.

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

struggling to get my trio of cards to line up correctly on a compact screen

When my elements reach the breakpoint of 1199, I have an issue with their alignment. Despite using justify-content, the style breaks and the cards are not stacked together as intended. I tried using mx-auto, but it doesn't seem to work. I've noti ...

cssbootstrap-5

Guidelines on separating data using square brackets when defining parameters in JSON

Currently, I am transferring data from a JavaScript file to a handler that retrieves results from a stored procedure. The parameter I need to pass is in the format ID = abc[123], but I only want to pass 123 as the value to the stored procedure. Below is ho ...

javascriptjson

Issue: The function `this.isModified` is not recognized as a valid function

Encountering an unusual problem. This code snippet is causing an error and it relies on arrow functions UserSchema.pre('save', next => { const SALT_FACTOR = 5; if (!this.isModified('password')) return next(); bcrypt.genSalt ...

javascriptnode.jsecmascript-6ecmascript-5

Tips for positioning the footer at the bottom of the page

During the process of constructing a new website, I included a footer that is neatly positioned at the bottom of my screen. https://i.sstatic.net/HgAbY.png However, I noticed that on pages with minimal content, the footer does not remain fixed at the bott ...

htmlcsstwitter-bootstrap

Semi-circle border using CSS

Looking to replicate the circular design shown in the image using CSS. Any tips on achieving this? ...

htmlcsscss-shapes

Establishing a minimum date based on the date selected in the earlier datepicker

My webpage features two date pickers, one for startdate and the other for enddate. The current setup requires that the second datepicker remains inactive until a change is made to the first one. The datepicker for enddate is initially set with the startin ...

javascriptjquery

Align the text vertically within a list item

<ul style="text-align: center;"> <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;"> <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</ ...

cssinlinevertical-alignmentlistitem

Adsense displays empty ad banners regardless of their predetermined size

Having trouble with Adsense banners? I have a page with three fixed-size banners (336 x 280) and sometimes they appear blank. It's random - one might work while the others don't, or none may work at all. The code is the same for each banner: < ...

javascripthtmlcssadsadsense

Scrolling through four limited list items automatically

Hey there! I am currently working on a design project. You can check it out here. I'm trying to replicate a section from another site, which you can see here. <div class="latest-winners-container"> <h3 class="header">Latest Winners< ...

javascriptjqueryhtmlcsstwitter-bootstrap

Interactive Bootstrap Popover Information

I am currently working on a link that toggles a Bootstrap Popover: <a href="#" data-toggle="popover" title="List of Stuff" data-rights="${result.itemId}">Toggle Popover</a> The challenge I am facing is related to displaying a list of countrie ...

javajquerytwitter-bootstrapappendpopover

Guide on retrieving the mouse button press from a command event using XUL

There appears to be a difference between the XUL command and click events. While my function is called when using the command event, the event object does not include the button property. I'm trying to figure out: how can I determine which mouse but ...

javascriptxul

Instructions for correctly integrating the ng2-datepicker module into an Angular 2 application

Ng2-datepicker (1.0.6) Angular2 (2.0.0-rc.5) As I attempted to implement it in my HTML following the documentation, I encountered the following error: zone.js:484 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngMode ...

javascripthtmlcssangularng2-datepicker

Creating a dynamic canvas with a three-dimensional model using three.js: A step-by-step guide

I'm currently developing a website where I have integrated a canvas element to display a 3D object (specifically, a cube) using three.js. The canvas is housed within a div, following the guidelines found in various documentation. The issue arises wh ...

javascriptcsshtmlthree.js

Display a <div> element styled using CSS3

Question: I am facing a challenge with CSS3 styling. I have one class and one div. The class is currently set to display:none, but I want it to show when the mouse hovers over it (display:block). I have attempted the following: .1:hover + div#2 { dis ...

css

Is there a method to keep the leftmost column in a Google visualization table anchored in place when scrolling horizontally?

I want to replicate the typical google visualization table header row functionality, but I would like it to be focused on the first column instead. It doesn't appear to be a default feature, so I'm curious if it could be achieved using custom CSS ...

javascriptjquerycssgoogle-visualization

I am attempting to implement tabbed content using JavaScript, but it seems to be functioning properly only on the initial

This is my HTML with CSS and JavaScript all in one place. JavaScript var links = document.getElementsByTagName("a"); //get the links var len = links.length; for(var i = 0; i<len; i++) { links[i].onclick = handleClick; // add onclick handler } ...

javascripthtmlcss

In Opera, the presence of links is resulting in the displacement of text upwards

Here is the culprit: While working with HTML5 Boilerplate, I encountered an unusual behavior in Opera. When hovering over links, the text appears to move upwards. Strangely, I have not applied any specific a:hover CSS for these links. This issue seems to ...

javascripthtmlcsshtml5boilerplate

No content found in jQuery .text() values within iframe

I am experiencing an unusual issue with assigning a value to a variable using jQuery. I am unable to retrieve the values from .text() specifically on Spotify, while other functions on different sites are working fine. Even after the elements have loaded, i ...

javascriptjquery

Caution in React: Utilizing functions with Object.assign() may not be a valid approach when dealing with React children

I have a setup using react for front-end and node for back-end. My goal is to retrieve data from the server to update the user entries on the front-end. I came across using Object.assign() as a potential solution to re-render user entries, but encountered ...

javascriptnode.jsreactjs

Scrolling to a specific element using jQuery after a specified delay has

On my website, I have a page with an autoplaying video located at . My goal is to implement a feature where once the video completes playing after a specific duration, the webpage will automatically scroll down to the text section. This scroll action sho ...

javascriptjqueryjquery-plugins