adjust division size proportionally to another one

I am trying to create a layout with right and left divisions where the size of the left division matches the height of the browser window (100vh).

The left division consists of two sub-divisions that need to have variable sizes but collectively match the size of the left division. Additionally, the scroll bar at the bottom should always align with the bottom of the browser window as shown in this example:

https://i.sstatic.net/nUVhX.png

I am facing difficulty in achieving this layout for the left division.

Here is a Fiddle link: https://jsfiddle.net/bb61c412/67/

Below is the code snippet:

#left-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: white;
}

#right-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: gray;
}

#scroll{
   padding-right:0px; 
   padding-left:0px; 
   background-color:#FAFAFA;
   overflow-y:scroll;
   height:70vh;  
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />


<div class="col-sm-7" id='left-div'>

  <div style="background-color:#FAFAFA;width:100%;height:100%;">

    <div style="height:100px;background-color:white">
    </div>

    <div id="scroll">

      <p>
        "Sed ut...."
      </p>

    </div>

  </div>
</div>

<div class="col-sm-5" id='right-div'>
</div>



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

htmlcsstwitter-bootstrap

Answer №1

If you want a simple solution, consider using flex-boxes and the align-self property:

More information on flexbox

#left-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: white;
}

#right-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: gray;
}

#scroll{
   padding-right: 0px; 
   padding-left: 0px; 
   background-color: #CCC;
   overflow-y: scroll;
   height: 70vh; 
   align-self: flex-end; /* Flex-end to get your scroll down */
}
<div class="col-xs-7" id='left-div'>
  
  <!-- Setting the main container to display : flex -->
  <div style="display:flex;background-color:#FAFAFA;width:100%;height:100%;">

    <div style="height:100px;background-color:white">
    </div>

    <div id="scroll">

      <p>
        Lorem ipsum...
      </p>
    </div>

  </div>
</div>

<div class="col-xs-5" id='right-div'>
</div>

UPDATE :

You can also set your container's position to relative and make the scroll div absolute positioned. By setting the bottom attribute to 0, you can make the scroll div stick to the bottom of the container.

Check out this example on jsFiddle

#left-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: white;
}

#right-div {
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
  height: 100vh;
  background-color: gray;
}

#scroll{
   padding-right: 0px; 
   padding-left: 0px; 
   background-color: #CCC;
   overflow-y: scroll;
   height: 70vh; 
   width: 100%;
   position: absolute;
   bottom: 0;
}

.form-inline {
    display: inline-block;
    text-align: center;
}
<div class="col-xs-7" id='left-div'>
  
  <!-- Setting the main container's position to relative -->
  <div style="position:relative;background-color:#FAFAFA;width:100%;height:100%;">
  

    <div style="height:100px;background-color:white">
        <form >
    <div class=form-inline style='text-align:center;'>
    <select name="Form1" class="form-control" >
                <option value="0">Form1</option>
                <option value="1">Option2</option>
                <option value="2">Option3</option>
    </select>
    
    <select name="Form2" class="form-control" >
                <option value="0">Form2</option>
                <option value="1">Option2</option>
                <option value="2">Option3</option>
    </select>
    
    <select name="Form3" class="form-control" >
                <option value="0">Form3</option>
                <option value="1">Option2</option>
                <option value="2">Option3</option>
    </select>

    <button type="submit" class="btn btn-default">Submit</button>

    </div>  
    </form>
    </div>

    <div id="scroll">


    </div>

  </div>
</div>

<div class="col-xs-5" id='right-div'>
</div>

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

Tips for showcasing information entered into text fields within a single container within another container

After creating three divs, the first being a parent div and the next two being child divs placed side by side, I encountered an issue with displaying input values. Specifically, I wanted to take values from input text boxes within the second div (floatchil ...

javascripthtmlcsstags

Automating testing for numbered lists with CSS list-style-type decimal

I need help with a JavaScript and CSS project. I have a situation where I have a numbered list like this: Coffee Tea Cola Here is the code structure I am using: <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type ...

htmlcssseleniumui-automation

How to access form elements within a submit function without specifically defining the form name

I have a form that I am submitting using a submit function. However, instead of using document id for submission variable, I am utilizing classes. $(".modalform").submit(function(event) { /* prevent form from submitting normally */ event.preventDefa ...

javascriptphphtmljquery

Exploring ways to retrieve information stored in localStorage within an android mobile application

I am currently developing an Android App using phonegap. The app is a simple game that generates random numbers for math problems. If the user answers correctly, their score increases, but if they lose, their name and current score are saved in localStor ...

javascriptandroidhtmlphonegap

Calculating the total number of days in each month within a specified date range using PHP in a dynamic way

Thank you for taking the time to help me with my issue. For instance, if a user selects a date range from 10 Dec 2016 to 20 April, how can I calculate the number of days for each month within that range? For example, Dec=22 Days, Jan=31 Days, Feb=28 Days, ...

javascriptphpjqueryhtmlcss

The font-weight property appears to be ineffective across all browsers

I'm struggling with the font-weight property in my CSS. Despite trying different values like lighter, bold, and even numerical values like 300, it doesn't seem to have any effect on the font weight in any browser. I am using the following code to ...

css

Executing a Javascript function post AJAX page loading

I'm not a coding expert, so I hope my question is still clear. Essentially, I have an index.php page with filters (by project, year, month) that send variables to filterData.php after clicking submit. These variables are then used in SQL statements t ...

phpjavascriptcssajaxsiblings

What is the best way to insert a new row into a table upon clicking a button with Javascript?

Hi everyone, I'm facing an issue with my code. Whenever I click on "Add Product", I want a new row with the same fields to be added. However, it's not working as expected when I run the code. Below is the HTML: <table class="table" id="conci ...

javascriptjqueryhtmldom

How to make a routerLink clickable within an anchor tag in Angular 6

I am facing a peculiar issue with a group of hyperlinks. html <div class="col-12 navlinks"> <div class="text-center"> <div class="justify-content-center"> <a class="col-auto d-inline-block whitelink" rou ...

htmlangularanchor

Creating a Duplicate of the Parent Element and its Child Elements using jQuery

Here is a code snippet I have that adds a new paragraph when a button is clicked. Currently, the script clones the "sub" div and appends it to the "main" div. However, the issue is that it only copies the content of the "inner" div within the "sub" div ins ...

javascriptjqueryhtmlfunction

Remove the image from the container in Bootstrap

I'm looking to position an image outside the container so that the right margin remains within the default container width (responsive) while keeping the image aligned with a button consistently. Please refer to the image below for clarification: ht ...

cssbootstrap-4

Stopping a velocity.js animation once it has completed: is it possible?

For the pulsating effect I'm creating using velocity.js as a fallback for IE9, refer to box2 for CSS animation. If the mouse leaves the box before the animation is complete (wait until pulse expands and then move out), the pulsating element remains vi ...

javascriptjquerycssanimationvelocity.js

Simple Servlet Program

//VoterServlet.java package com.nt.servlet; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; public class VoterServlet extends HttpServlet { public void doPost(HttpServletRequest req,HttpServletResponse res)throws S ...

html

Clicking on the parent div with a Jquery onclick event does not trigger when the child image is clicked

I'm running into an issue with a simple code containing an image within a div Oddly enough, clicking on the div itself (even with padding) triggers the function, but clicking directly on the image does not. $(".parent0").click(function() { conso ...

javascriptjqueryhtml

Adjustable block with excess content

Forgive me if this question seems basic, but I'm not very familiar with CSS. I have a table with two columns that need to be equally sized and responsive when the page is resized. The header isn't an issue since it only contains a few words in ...

htmlcssoverflow

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...

javascriptcssreactjsnext.jssass

Safari not centering element with justify-self in CSS grid

My challenge involves adjusting the alignment of a div (mobile menu) that is currently centered using css grid and the justify-self property in chrome. However, when viewed in Safari, it appears on the left side of the screen behind the Instagram icon: ht ...

htmlcssvue.jssafariwebkit

Enter your password using the text input field on Internet Explorer 8

I'm currently developing a website and facing an issue with the password input field: When clicking on it in browsers like IE9, Chrome, and Mozilla, the text changes to allow entry of the password. However, in IE8, clicking on the input field leaves ...

phpjavascriptjqueryhtmlinternet-explorer

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

javascripthtmlcss

Tips for maintaining a fixed size for CSS grid cells' minimum and maximum dimensions

I am attempting to utilize CSS grid to create an entirely fixed layout. This layout is for an embedded application that contains both GUI elements and text fields. The sizes of the cells should remain unchanged and not readjust as their content grows or sh ...

htmlcsscss-grid