Tips for designing a background that dynamically adjusts its height based on the content

Currently, I am struggling to set up a background that automatically adjusts in height as new content is added. What I want to achieve is for the background to cover the entire screen (100vh) if there is no content, and then adjust its height as content is added, stopping at a minimum height of 100px. I have provided an image below to give you a better idea of what I am aiming for.

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

Despite my efforts with properties like min/max/100%/auto height in CSS, I haven't been able to find a solution yet. My current project setup involves Vue 3, TypeScript, and CSS.

If anyone could provide some guidance or help, it would be greatly appreciated. Thank you!

htmlcsstypescriptbootstrap-4

Answer №1

If you utilize flexbox, you will get the exact layout that you desire. Essentially, the parent container is set to display as flex which enables the children to use flexbox properties. The .background div is then assigned flex-grow: 1, meaning it will expand to fill any remaining space within the parent based on the amount of content present.

.flex-container {
    display: flex;
    height: 100vh;
    flex-direction: column;
}
.background {
    background-color: blue;
    flex-grow: 1;
}
<div class="flex-container">
    <div class="background">
        <h1>my background div</h1>
    </div>
    <div class="text">
        <!-- Your text content here -->
    </div>
</div>

Answer №2

Utilize the text container to conceal the background below it.

.container {
   border: solid 1px grey;
   background-color: red;
   position: relative;
   height: 250px;
}
.text {
  position: absolute;
  bottom: 0;
  background-color: white;
  width: 100%;
}
<div class="container">
  <div class="text">
    <p>This is some content <br /> displayed on various <br /> lines.</p>
  </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

Filtering data in a table using Jquery based on specific columns and headers

To retrieve a price value from an HTML table based on a specific column and header, follow these steps: Here is how the table is structured: https://i.sstatic.net/UM3MA.png The HTML code appears as follows: <input id="search_height" placeholder= ...

jqueryhtml

Frequently found items in TypeScript

I need help incorporating a global object in TypeScript for my application. Specifically, I want to have user details available and bindable throughout the entire application after a remote call. Can someone provide an example of how this can be achieved? ...

typescriptsingleton

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

Looking to implement a tabs navigation using jQuery without the jQuery Tabs UI. Essentially, when a user clicks on a list item, the script selects the list element with data-tab="X" and adds the class current, making the link visible (default op ...

javascripthtmljquerycsstabs

how to use jQuery to hide a flash-containing div without losing its content

Hello, I created a modal with jQuery UI that is displaying in front of a flash movie. However, the HTML content inside the modal appears corrupted. I attempted to hide the movie just before the modal is triggered and make it reappear after closing the mo ...

javascriptjqueryflashhtml

Positioning a full-width background-image in the center is causing the page to expand

I've been struggling to find a solution to this issue for hours, scouring the internet with no success. The problem I'm facing is trying to center a background image on the page. However, when using the method shown here, it ends up stretching t ...

htmlcss

Is there a way to conceal/remove the text displayed on the submit button?

I am facing an issue with a submit button in my PHP code. The button displays an integer value that is crucial for running a script, but I want to hide the value as it interferes with the design using CSS. I have attempted various solutions like removing t ...

phpcss

Tips for identifying when the value of a div changes using Selenium

Currently, I am using selenium to gather data from a website. The structure consists of a parent div with 30 children divs. Periodically, one value is updated and stored in the first child while the last child is removed, maintaining a history of the las ...

pythonjavahtmlseleniumdom

Looking to create universal React component wrappers?

I am working with a set of functional components that share a common set of properties, for example: const A = ({ x, y, z }) = {...} const B = ({ x, y, z }) = {...} For these components, I have predefined configurations: const styles { A: { ty ...

reactjstypescriptjsx

Customize your JQuery/HTML5 Slider to accept user input

Currently, I am developing a time tracking mobile application in MVC4, which includes the use of a slider input type. <input type="range" name="time_verdi" id="slider" value="7.5" min="0.0" max="24" step="0.5" data-highlight="true"/> When using thi ...

javascripthtmlasp.net-mvc-4jquery-mobile

Restrict the input area of a text field

Apologies for the basic question, but I couldn't find an answer online. I have a textarea that I want to be resizable, but with specific dimensions when the page loads. The initial size should be the minimum size of the textarea. Additionally, I woul ...

htmlcsstextarea

Tips for arranging accordion buttons side by side so they all expand into a single element

I'm currently working on a unique accordion design where multiple buttons expand into individual areas below when clicked. The standard accordion layout isn't quite what I'm aiming for. I envision the buttons all in a row, and when clicked, ...

javascriptcssaccordion

How to generate a prop with an ID-value pair in Vue using JavaScript

When working with TypeScript in Vue components, I have come across the following way to initialize props: @Prop({ type: Object }) tabDetails: tabDetailsTypes The structure of the tabDetailsTypes looks like this: export interface tabDetailsTypes { ...

javascripttypescriptvue.js

jQuery ensures that the show and hide features happen instantly

I have a single div containing two other div elements: <div> <div id="card-container">....</div> <div id="wait-for-result-container" style="display: none;">...</div> </div> When a specific event occurs, I want to swi ...

javascriptjquerybootstrap-4

Utilizing lazy loading in conjunction with ngFor to optimize performance

I encountered the error Can't bind to 'ngForOf' since it isn't a known property of 'li'. Despite trying the suggested solutions, such as importing BrowserModule in the main module (app.module.ts) and importing CommonModule in ...

angulartypescript

Access the freshly launched URL

I am relatively new to PHP and have a table displayed on my webpage. Each row in the table has an auto-incremented rowid that is not being displayed. When clicking on a row, it opens a new page in the format of www.newpage.com/newpage/rowid. If I inspect ...

phphtmlurlseleniumrows

Is it possible to utilize a const as both an object and a type within TypeScript?

In our code, we encountered a scenario where we had a class that needed to serve as both an object and an interface. The class had a cumbersome long name, so we decided to assign it to a constant. However, when we attempted to use this constant, we faced s ...

typescript

Retrieve various Hyperlinks from database for presentation within a gridview

My objective is to include multiple Hyperlinks in a single cell of a gridview, separated by commas. The approach I have considered is to generate the HTML code during data retrieval. I have devised a simple query that creates a series of Hyperlinks based ...

htmlasp.net

How can a JavaScript code be used to navigate to a different HTML file within the same directory that is stored within a folder?

Here is the sample HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlhttp-redirect

Tips for embedding Jquery code within Vuejs applications

Trying to code a Vue.js Navbar that changes color when scrolling using Jquery and CSS script. It works, but I encountered an error with Vue.js not supporting the syntax '$' after page refresh, resulting in a "$ not defined" error message. As a ne ...

javascriptjquerycssvue.js

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Is there a way to restrict clicking outside the blue circle? The goal is to only allow opening by clicking on the svg itself, This includes everything, even white space inside the svg. How can this be achieved in the code? The current behavior is that ...

javascripthtmlcsssvg