How to create a self-contained div in VueJS using Tailwind CSS without affecting other elements

I'm feeling completely overwhelmed right now. Attached is a picture showing the issue I'm facing:

  • The user list layout is on the right
  • The chat content in the middle should be scrollable vertically
  • The bottom div should stay fixed in place without moving

For some reason, the current behavior feels off to me with all the scrolling happening everywhere. As someone more accustomed to backend work, I'm really struggling with this and would greatly appreciate any help in resolving it.

Here's the code snippet for reference: https://i.sstatic.net/Zs6aQ.jpg

<div class="w-full">
  <!-- Code snippet goes here -->
</div>
htmlcsslaravelvue.jstailwind-css

Answer №1

It appears that all you need to do is adjust the outer div to be a flex column (flex-col) and then set its maximum height using max-h-screen.

<div class="w-full flex flex-col max-h-screen">
   <div class="sm:hidden">
   </div>
   <section class="w-full flex scrollbar-thin hover:scrollbar-thumb-indigo-700 dark:hover:scrollbar-thumb-indigo-700 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thumb-gray-400 scrollbar-track-gray-50 overflow-y-scroll">
   </section>
   <section aria-labelledby="chat-footer" class="h-auto w-full sticky shadow-2xl bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-900 border-l dark:border-gray-800 border-gray-200 bottom-0 min-w-full flex-1 flex flex-col lg:order-last">
   </section>
</div>

View the demo here

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

Guide on implementing two submission options in an HTML form using JavaScript

Currently, I am working on a form that includes two buttons for saving inputted data to different locations. However, I am facing an issue with the functionality of the form when it comes to submitting the data. Since only one submit function can be activa ...

javascripthtmlformsfirebasesubmit

How can you use PHP to dynamically create a table with custom row sizes?

Trying to brainstorm a simple way to generate an HTML table with rowspans using PHP. Ideally, I want it to resemble the following structure, with each number representing the cell's rowspan: Upon observation, I've identified a potential pattern ...

phphtmlhtml-table

Creating a dynamic list structure using <ul> and <li> tags in a CSHTML ASP file

I am aiming to design a visually appealing structure using ul li for categories. Each line of the structure should consist of three elements: <li> <ul class='kwicks kwicks-horizontal'> <li></li><li></l ...

htmlasp.net

Unable to display ChartJs within the same DIV on the webpage

I'm struggling to display the Pie Chart from ChartJs in the correct DIV when I click from the left DIV. Running the chart directly works fine, but I want them both on the same page in separate DIVs. I have separate HTML files for each link and they wo ...

javascriptjqueryhtmlcsschart.js

Having Trouble with Your Instafeed Script

I've been working on a project that involves integrating an Instagram feed into a website. However, I'm facing difficulties getting it to function properly. Here's the code that I have implemented. <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Exploring techniques for creating realistic dimensions in CSS

My goal is to create a responsive website that accurately displays an object with specified dimensions, such as a width of 100mm, regardless of the user's screen resolution. However, I am facing challenges in achieving this consistency across all devi ...

javascripthtmlcssunits-of-measurementppi

choosing and identifying the iframes for YouTube videos

I have a webpage that showcases images of YouTube videos, allowing users to choose from them. This is how I am presenting them: <ul> <li> <div class="youtubeMediaContainer"> <img src="video_preview_image1.jpg"& ...

htmlcssiframeyoutube

Modify the appearance of HTML dialog box using CSS styling

Currently, I am working on a Java Spring project that includes a single CSS file consisting of around 1500 rows. Recently, I was tasked with adding a dialog box to one of the screens in the project. The issue I encountered is that the style of the dialog b ...

javajquerycssstylesdialog

Responsive design with Semantic UI

Can you please provide an example of how to design for different screen sizes using Semantic UI instead of Bootstrap? I'm looking for something similar to Bootstrap's sm and lg classes. For instance, would it look like this: <div class="col s ...

cssresponsivesemantic-ui-react

Reactively created menu using JQuery

Looking to implement a dynamic JQuery menu using React (ES6). Utilizing the JQuery menu examples (https://jqueryui.com/menu/) as a guide, however, those examples only cover static menus. It doesn't clarify how to modify menu items like updating labels ...

javascriptjqueryhtmljsonreactjs

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Similar Question: Is there a way to determine if a CSS class exists using Javascript? I'm wondering if it's possible to check for the presence of a class called 'some-class-name' in CSS. For instance, consider this CSS snippet: & ...

javascriptjqueryhtmlcss

Navigation bar experiencing resizing problem, refreshing resolves the issue

I've been struggling with this problem all day. I'm attempting to create a header that consists of a logo on the left and a list on the right. I want it to resize along with the navigation below the logo. I WAS ABLE TO ACHIEVE THIS but when ...

htmlcssresponsive-design

Creating unique URLs for websites can be accomplished by following these steps:

I am in the process of developing a website where content in the main div within the body section can be replaced. However, I have realized that all content will end up on the same URL. Any suggestions on how to fix this? HTML/PHP(index.php): <htm ...

javascriptphphtmlurlweb

Can you explain the distinction between max-width and min-width in media queries for HTML and CSS?

Could you explain the distinction between max-width and min-width in media queries in HTML and CSS? @media (min-width:480px) { /* styles for smartphones, Android phones, and landscape iPhone */ } @media (min-width:600px) { /* styles for portrait tabl ...

cssmedia-queries

Unable to locate any division element by using document.getElementById

I'm encountering an unusual issue in my code. I am attempting to change the background color of certain divs using Javascript, but for some reason, when I use "document.getElementById", it is unable to find the div and returns NULL. Here is the probl ...

javascriptphphtmlcss

Is there a way to occupy the extra space while working with an inline unordered list?

Using this unique CSS code, I've managed to give my unordered lists a touch of elegance: ul, li { padding: 0px; margin-left: 0px; margin-bottom: 0px; display: inline; } li { border: solid 1px #333333; margin-right: 5px; padding: 2p ...

htmlcss

Card with multiple links and tab-stopping

I'm trying to figure out the best way to navigate through a series of project information cards that include links to a live demo and Github Repo without overwhelming visually impaired users with excessive tab stops. I want the navigation to be seamle ...

htmlcssaccessibility

Troubleshooting V-model errors within VueJS components

Just dipping into VueJS and trying out a chat feature from a tutorial. I noticed the tutorial uses v-model in a component, but when I replicate it, the component doesn't display on the screen and the console throws a "text is not defined" error. Strug ...

javascriptfrontendvue.js

Divide a single image into several smaller images and enable clickable links on each separate image, similar to an interactive image map

Challenge: I am faced with the task of splitting a large image (1920px x 1080px) into smaller 40px by 40px images to be displayed on a webpage. These smaller images should come together seamlessly to recreate the original full-size image, with 48 images a ...

cssvue.jsflexboxvuetify.js

Electron and Vue.js collaborate to create an innovative desktop application

I am working on a Vue page called BeginTestView.vue, which features a start testing button. When this button is clicked, it triggers an exe file containing Nunit tests in C#. I attempted to execute the exe file using child_process within the Vue component ...

node.jsvue.jselectronchild-processexecfile