Full height container with content that can be scrolled (Tailwind)

I am designing a webpage that requires two containers stacked on top of each other with some space in between. The bottom container should occupy the remaining screen space accurately, neither more nor less. Inside this lower container, there will be fixed content (such as a navigation bar) along with dynamic content fetched from a database, which needs to be scrollable. However, I am facing an issue where the scrollable content overflows the lower container and goes out of the viewport. I have tried various solutions like overflow-hidden/overflow-auto properties but none have been successful. Additionally, all the content needs to have fixed positioning, margins, paddings, width, and height.

Here is a snippet of my code:

Index.vue

<template>
 <div class="h-screen bg-gray-600 flex flex-col">

  <div
  class="flex h-56px w-auto z-1001 flex h-56px top-10 tablet:left-8 mb-16 object-  center tablet:object-left-top inline-flex justify-center items-center bg-grey-200 rounded-lg shadow-rb z-1001"
>
  <UpperContainer />
</div>
<div
  class="flex-1 h-full w-full tablet:w-420px mb-10 tablet:left-8 justify-center items-center bg-green-200 rounded-lg shadow-rb z-1001"
>
  <LowerContainer />
</div>

LowerContainer.vue

<template>
<div class="">
<FixedContentContainer class="">
  <FixedContent name="Example">
    <ScrollableContentContainer :scrollableContent="content"
      class="relative h-full w-full bg-blue-400 overflow-hidden"
    ></ScrollableContentContainer
  ></FixedContent>
</FixedContentContainer>

ScrollableContentContainer.vue

<div class="overflow-auto w-auto absolute h-full">
 <div v-for="content in scrollableContent" :key="content.name">
  <ScrollableContent
    :name="content.name"
  />
</div>

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

Answer №1

I've gone ahead and set up a basic structure/code for you in Tailwind Play.


Take a look at the classes below to understand them better.

flex-col separates the upper and lower containers

space-y-8 determines the spacing between the upper and lower containers

min-h-screen max-h-screen adjusts the main div to fit the page height

flex-1 on the lower container allows it to expand and utilize the remaining space left after defining the heights of other elements

overflow-hidden on the lower container prevents content from overflowing outside the viewport

flex-col organizes the navigation and scrollable container vertically

flex-1 on the scrollable container occupies the remaining height, excluding the navigation bar's height

overflow-x-hidden overflow-y-auto
makes the container scrollable only along the y-axis


<div class="flex flex-col min-h-screen max-h-screen bg-gray-50 space-y-8">
  
  <!-- Upper Container -->
  <div class="flex h-24 bg-gray-200">
    <div class="flex w-full justify-center items-center">Upper Container</div>
  </div>

  <!-- Lower Container -->
  <div class="flex flex-1 bg-gray-200 p-8 overflow-hidden">
    <div class="flex flex-col flex-1 space-y-8">
      
      <!-- Navigation Bar -->
      <div class="flex bg-gray-300 h-24">
        <div class="flex w-full justify-center items-center">Navigation</div>
      </div>

      <!-- Scrollable Content -->
      <div class="flex flex-1 bg-gray-300 p-8 overflow-x-hidden overflow-y-auto">
        Insert your scrollable content here...
      </div>
    
    </div>
  </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

The body and HTML elements are bloated with an excessive amount of

Before we dive in, check out this code pen. CSS <body> <div class="header"> <img src="https://images.unsplash.com/photo-1586244439413-bc2288941dda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=cro ...

Preview multiple images while uploading with V-for in Vue JS

Having trouble displaying images in a loop using :ref I've implemented FileReader() to read the field. Vue Component <div v-for="(image, index) in imgFile" :key="index"> <img :ref="'image'+parseInt( index )"> {{image.name}} ...

Encountering an issue with Laravel 8 and Tailwind where a webpack-cli error is throwing a TypeError regarding compiler.plugin

I am trying to set up Tailwind in my Laravel 8 project. I followed the instructions on the official documentation and executed the following command without any errors: npm install -D tailwindcss@latest postcss@latest autoprefixer@latest However, when I t ...

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/ I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any a ...

Utilizing React.js with Material-UI to retrieve data from a table row when clicked

I came across a code snippet for a material table that can handle lists as input and perform pagination, sorting, and filtering on them. The challenge I am facing is figuring out how to extract the data from a row click event and navigate to a new route al ...

Utilize jQuery setInterval to dynamically add and remove classes on elements

My goal is to display my image in a way that resembles waving flames. I decided to achieve this effect by using two layers (flame tongues) stacked on top of each other in the same position. My initial approach was to hide one flame tongue while showing the ...

"Using Vue's v-model directive in conjunction with a select input

I'm attempting to set any option within my select input as a value in an object. My goal is to utilize v-model for this, but I'm still unsure of the process. Below is my current attempt: <div class="select-wrapper"> <select r ...

Adding Extra Fields to PHP Email Form

Currently, I have an email form set up using PHP: <form method="post" action="contactus.php" autocomplete="off"> <label for="Name">Name:</label> <input type="text" name="Name" id="Name" maxlength="60" required/ ...

Angular html5 mode failing to serve index.html via Express

When attempting to implement html5 mode in my Angular JS app for better SEO, I encountered a challenge with Express serving index.html upon request. This resulted in deep linking issues and the inability to refresh the page. This is how my App.js is curre ...

Can a new frame be created below an already existing frame in HTML?

My main.html file looks like this: ----- main.html---------------- <title>UniqueTrail</title> <script src="main.js"></script> <frameset rows='200,200'> <frame id='one' src="f ...

Shifting the size of a React element with animation

Within my React-based application, I am attempting to execute a basic CSS3 width transition with the following code: .foo { transition: width 1s ease-in-out; } My objective is to apply a style to an element in the React component which is "width: xx% ...

Show a picture without specifying its file location

Looking for Suggestions on a New Title I am interested in using a script as the source attribute for an image, like this : <img src="img.js"/> Note: I am open to using any programming language, whether it be javascript or php. Here is what my fol ...

What is the process for detaching and attaching click animations using the on() method?

I am encountering an issue with a recursive loop that executes a simple animation. These animations are controlled by the page load and clicking on controls .carousel_item. Click here for live sample JSFiddles for demonstration purposes Challenge: The pr ...

A step-by-step guide on submitting a CSV file with Ajax along with additional form information

Imagine you have an HTML form with input fields for Name, Location, Address, and Family members (to be uploaded as a CSV file), along with a Submit button. However, when you click on submit, the data from the CSV file is not being passed to the PHP script. ...

The value for the specified date and time is not appearing on the

When using the Bootstrap DatetimePicker, I'm able to select a date and time. However, after clicking on a date, it does not prompt me for the time until I click on the clock icon. Another issue arises when attempting to display the stored date and ti ...

Is it possible to establish the page state upon loading (in the context of a GET request

At present, my navigation bar is set up to utilize AJAX for loading new pages and window.pushState() in order to update the URL when the AJAX call is successful. I've come to realize that it's crucial to push the page state during GET requests s ...

"Enjoying the convenience of a stationary header while browsing on your smartphone

Hey there! I'm currently facing an issue with my website's fixed horizontal nav bar when zooming in on a mobile device. After doing some research, it seems the only solution is to implement some javascript. I came across a jquery fix (see below) ...

Overlapping Flexbox elements causing stacking issues

My attempt to create a gallery layout with two larger blocks amidst smaller blocks is not functioning correctly. The large block is overlapping the two smaller blocks below it. Is there a way to prevent block overlapping using CSS? I have searched Stack O ...

Is there a method in CSS Grids to wrap the implicit grid while employing grid-auto-flow: column?

How can I achieve a layout consisting of two 4x2 grids that flow into each other, instead of being positioned side by side? Essentially, I want to split an 8x2 grid into two halves and stack them vertically. Is there a way to make the layout wrap around it ...

Transitioning the style code from inline to the head of the document disrupts the straightforward JavaScript intended to

As I delve into the world of web development, I encountered a simple issue that has been causing me frustration for the past hour. It involves code to display the border color of a div element using an alert. The code works perfectly fine when the style is ...