insert a div element at a static position with a height of 100%

Adding two divs on top and bottom of a fixed div is what I need to do. To achieve this, I created a panel with a fixed position on the left side. I added the first div with the h-100 class which sets its height to 100%. However, when I try to add the second div to the panel, it doesn't show up in the result.

.vertical-side {
  width: 250px;
  z-index: 1001;
  background: #fbfaff;
  bottom: 0;
  margin-top: 0;
  position: fixed;
  top: 0;
  border-right: 1px solid #e9e9ef;
}

.second {
  width: 250px;
  height: 100px;
  border-top: 1px solid #e9e9ef;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e253b2539">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="vertical-side">
  <div class="first h-100">
    First div
  </div>
  <div class="second">
    Second div
  </div>
</div>

To see a demo, click HERE

This is what I am trying to achieve: https://i.sstatic.net/tAEx0.jpg

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

If you want to achieve this layout, you can utilize the flex utilities provided by Bootstrap. Check out the demo here.

.vertical-side {
  width: 250px;
  z-index: 1001;
  background: #fbfaff;
  bottom: 0;
  margin-top: 0;
  position: fixed;
  top: 0;
  border-right: 1px solid #e9e9ef;
}

.second {
  width: 250px;
  height: 100px;
  border-top: 1px solid #e9e9ef;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d839d81">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="vertical-side d-flex flex-column">
<div class="first h-100 text-center">
  First Div
</div>
<div class="second d-flex align-items-center justify-content-center">
  Second Div
</div>
</div>

Answer №2

Based on your request, I have provided the code below for adjusting the height and width of the elements:

.vertical-side {
  width: 250px;
  z-index: 1001;
  background: #fbfaff;
  bottom: 0;
  margin-top: 0;
  position: fixed;
  top: 0;
  border-right: 1px solid #e9e9ef;
}
.first {
  width: 250px;
  height: 100px;
  background:blue;
  border-top: 1px solid #e9e9ef;
}
.second {
  width: 250px;
  height: 100px;
  background:Red;
  border-top: 1px solid #e9e9ef;
}
<div class="vertical-side">
<div class="first">
First Div
</div>
<div class="second">
Second Div
</div>
</div>

Answer №3

When working in HTML, think of it as building layers. Your second div might have been unintentionally placed against your first div, when you actually wanted it at the bottom. Introducing a spacer div between the two creates space that can be utilized later on for styling.

CSS

.vertical-side {
width: 250px;
z-index: 1001;
background: #fbfaff;
bottom: 0;
margin-top: 0;
position: fixed;
top: 0;
border-right: 1px solid #e9e9ef;
}

.top {
width: 250px;
height: 100px;
border-bottom: 1px solid #e9e9ef;
}

.spacer {
height: 45%;
}

.bottom {
margin-top: 100%;
width: 250px;
height: 100px;
border-top: 1px solid #e9e9ef;
}

HTML

<div class="vertical-side">
    <div class="top">
        <h1>First div</h1>
    </div>
    
    <div class="spacer">
        <h3>Spacer</h3>
    </div>
    
    <div class="bottom">
        <h1>second div</h1>
    </div>
</div>

Visual Representation:

https://i.sstatic.net/42ikg.png

Feel free to customize as needed

Answer №4

The positioning of your second div is causing it to be outside the viewport since it is underneath your first div, which takes up 100% of its parent height. Consider using flex/grid for the parent div in a vertical arrangement to ensure the second div is visible. Also, setting a specific height for the first div can help resolve this issue.

https://i.sstatic.net/0YF2Z.jpg

Answer №5

you currently have in your CSS for .vertical-side: bottom: 0; and top: 0; try removing bottom: 0; to see if that helps

another option is to utilize grid and adjust the height using: grid-template-rows: 1fr 60px;

or use grid-template-rows: 1fr 1fr for automatic height adjustment.

.vertical-side {
  display: grid;
  grid-template-rows: 1fr 60px;
  width: 250px;
  height: 100vh;
}

.first {
  display: grid;
  align-items: center;
  justify-content: center;
  background: grey;
}

.second {
   display: grid;
   margin-top: 2px;
   align-items: center;
   justify-content: center;
   background: green;
}
<div class="vertical-side">
    <div class="first">
      first
    </div>
    <div class="second">
      second
    </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

Expanding text area size dynamically in Nuxt3 using Tailwind CSS

Is there a way to expand the chat input field as more lines are entered? I want the textarea height to automatically increase up to a maximum of 500px, and adjust the height of .chat-footer accordingly. Below is a snippet of my code. <div v-if="ac ...

cssvue.jstailwind-cssnuxtjs3tailwind-ui

When accessing the defaultValue property of a select element, it will result in

Here is a typical HTML dropdown menu: <select name="email" id="email"> <option value="2" selected="selected">Before redirecting to PayPal</option> <option value="1">After payment is successful</option> <opti ...

javascriptjqueryhtml

When there are more than two divs on the page, they tend to overflow beyond the boundaries of

I am managing a platform where users have the ability to share text-based posts, and other users can engage with those posts through comments. An issue I have encountered is that once more than two comments are posted on a parent post, they start to overfl ...

htmlcss

What is the best way to ensure a dropdown menu stays visible while navigating through various If/Else blocks?

I am fairly new to working with PHP and MySQL, so I have been using the mysql_* functions despite knowing that they are no longer supported. However, I can't seem to find anyone else who has had a similar question to mine, which is why I am reaching o ...

phphtmlmysql

Having trouble with displaying the CSS background image?

I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly. Below is the CSS code that I'm working with: a.fb { background-image: url('img/Facebook.png&a ...

htmlcss

Problem arising from selecting checkbox label

Every time I click on the checkbox label, it automatically scrolls to the top of the page. I even removed all scripts and styles from the code, yet the issue persists. My suspicion is that it may be related to the loop, so I am currently investigating fur ...

jqueryhtmlruby-on-rails

Solving Problems with Image Placement using CSS

As I embark on learning responsive CSS, the concept is still quite new to me. One issue I'm facing is the alignment of the images on the second row in comparison to the top images. I aim to have 4 images per row, with the flexibility for the image siz ...

cssimage

What is the method for integrating fingerprint recognition into a web application using either Laravel or Django?

For a school project, I've been tasked with creating a web application that can fingerprint users or visitors. This means gathering details about their device such as OS, browser, IP address, country, city, and more. The app needs to be modern and re ...

javascriptphphtmldjangolaravel

The styled-components in CSS are causing some issues with the color themes

Link to Image Showing the Issue. I have implemented themes and colors in my React application successfully, but I am encountering a peculiar problem with the labels. Whenever I switch the theme from green to blue and then back to green, focusing on the inp ...

cssreactjsformsinputstyled-components

Mobile devices are unable to properly implement the Jquery show/hide feature

Currently, I am working on a small Russian project and facing some challenges with the mobile version of my website: php8098.github.io/breakfast. The issue lies within the first slider where the play button should trigger a modal window to open. I urgentl ...

javascriptjquerycss

Ways to slightly boost the default font-size values when using wicked-pdf

In the wicked-pdf report, I have body content with varying font sizes. When I apply a font-size of 16px to the paragraph like so: p { font-size: 16px !important; } The entire paragraph's font size becomes 16px, which may include words with diff ...

ruby-on-railshtmlcssruby-on-rails-2wicked-pdf

Enable and disable modal popup functionality in ng-bootstrap for Angular 5

How do I enable (editable) and disable (not editable) an ng-bootstrap modal popup? I have the following HTML code to display a modal popup when a button is clicked. However, I want it to be inactive until a certain condition is met. I am unsure of how to ...

angularhtmlng-bootstrap

Tips for reusing a form within a one-page website

I am looking for a way to handle a form's submit action using JavaScript. My goal is to hide the form when it is submitted and then be able to reuse it later. However, the code I currently have seems to have a hidden state that prevents the submit act ...

javascripthtmlforms

Only apply the CSS filter alpha to the parent element and not its children

I am working on implementing an alert message box using HTML and CSS. Below is the code I have so far: <div class="dim" id="msg"> <div class="dialog_wrapper"> <div class="dialog" id="msg_value"></div> ...

cssfilteralpha

Executing JavaScript code from an external link

Currently, I am in the process of developing a horizontal parallax website. The functionality is working seamlessly; when I click on the menu, the slides smoothly transition horizontally and display the corresponding content. However, I have encountered a ...

javascriptjqueryhtmlparallaxhorizontal-scrolling

CSS rules must include specified units

I am fairly new to CSS and have a question about specifying units in the code below. Without specifying units for height and width, the text fits on one line. However, once I add 'px', the text occupies two lines instead. Can anyone explain what ...

css

Trigger a function when the browser automatically populates an input field

I am attempting to trigger a function that can detect if the browser has autofilled a field and then add a specific class to it. After finding a thread with a solution that mostly works, mentioned here: Here is how I implemented it: $.fn.allchange = fun ...

javascriptjqueryhtmlautocompletecallback

Having difficulty passing a variable between two different PHP files

When attempting to modify data in the database for a specific user column, I encountered an issue. The code that I created only alters the data for the last user in the database, rather than the current user. For instance: Let's say I am logged in as ...

phphtmlmysqldatabase

Creating a dynamic row in an HTML table with elements inside

I have an array of numbers in my angular application that I need to display in an HTML table without truncating them and ending with a comma. Each row should display a maximum of 20 values. How can this be achieved? The array looks like this - let arr ...

htmlangular

Is there a way to create a responsive navbar using flexbox that automatically transitions into two rows at smaller screen sizes?

I've designed a sleek navbar located at the bottom of my webpage featuring a central logo leading to the home page, with two links on each side directing users to specific pages. Using @media CSS, I made it responsive by reducing its size as the scree ...

htmlcsstwitter-bootstrapflexboxbootstrap-4