Adjustable DIV based on screen size

I am attempting to create a flexible div that will adjust its width and height proportionally based on the viewport size. However, in the example above, this method only seems to make the div expand horizontally without affecting the vertical height (which remains fixed). When I try to use percentage values for the height of my wrapper or main_content elements, the browser ignores them unless they are specified in pixels or ems. How can I resolve this issue? If I could set the height of my div with a percentage value, it should solve the problem, right?

<div class=".wrapper">
  <div id="main_content"></div>
<div>

.wrapper{
   width: 80%;
   margin : 0 auto;
}

#main_content{
  width : 100%;
  height : 500px;
} 

Answer №1

Summary:

html, body {
    height: 100%;
}

Detailed Explanation:

The html and body elements serve as containers with heights that adjust according to the content within them. However, setting height: 100% for a wrapper element results in its height being based on the container's dimensions, excluding padding and margins. To address this issue, it is recommended to set the height of html relative to its parent element (the actual document), and then define the height of body relative to html. This approach allows the wrapper element to be sized as a percentage of the entire document's height.

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

What steps do I need to take to create a basic API that links to a MySQL database?

I'm currently trying to develop an API for PHP that will enable one web server to communicate with another web server. Additionally, I want this API to be able to update MySQL code. Previously, I was utilizing $_GET parameters for this purpose but rea ...

How can you make the coordinates of the cursor track the cursor when it hovers over a rectangle?

The code provided below will constantly display the cursor's coordinates right below the cursor: function displayCursorCoordinates(e) { var x = event.clientX; var y = event.clientY; var coordinates = "(" + x + ", " + y + ")"; document.getEl ...

What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how ...

Using SCSS based on the browser language in Angular: A Step-by-Step Guide

Is there a way to implement SCSS that is dependent on the user's browser language? When I checked, I found the browser language specified in <html lang = "de"> and in the CSS code as html[Attributes Style] {-webkit-locale: "en&quo ...

How can I convert an HTML table into a PDF using TCPDF while ensuring that all content is contained within a single div in PHP?

I have successfully converted my JSON API data into an HTML TABLE format and now I am trying to generate a PDF from this HTML TABLE using TCPDF in PHP. Despite trying various methods related to PDF generation using TCPDF, I am facing issues with my code wh ...

Arranging images effortlessly using jQuery sortable feature in HTML

I'm currently working on creating sortable images using jQuery in an HTML document. I've encountered an issue with the source code here. I have implemented the jQuery sortable function in a functions.js file and successfully tested it on another ...

What is the best way to include personalized attributes in a form_for?

Here is the code I am working with: <%= form_for @quiz do |f|%> <% @questions.shuffle.each do |q| %> # get_answers returns an array of 4 random answers <% answers = q.get_answers %> <%= f.label q.inquest %><br> ...

Automatic page updates triggered by code modifications

I am currently working on a .NET ASPX page where I usually write my classes separately in the app_code folder. However, for this specific page, I needed a temporary class that is only required by this page. So instead of creating a separate file, I decid ...

Use custom styles or CSS for the file input element: <input type="file">

Can CSS be used to achieve consistent styling for <input type="file"> in all browsers? ...

Design the button element with input text using CSS styling

https://i.sstatic.net/3vdRV.png Is there a way to stylize input text and buttons similar to this using CSS or Vuetify JS? ...

Is there a way for me to conceal my table upon clicking on the sidebar? Additionally, when I click on a button to display a different table, can the currently visible table automatically close?

I have a unique table for each button. Initially, the tables are hidden using CSS visibility: 'hidden', and when I click a button, the corresponding table displays. However, the issue arises when I click the same button again as it fails to hide ...

arranging a collection of images based on their values in increasing order

cardShop is a container with various images, each with its own unique ID and value attribute. These values consist of two numbers separated by a comma, such as 2000,500 or 1500,200. My goal is to sort these images in ascending order based on the first numb ...

Acquire a set of picture cards for displaying in a grid layout

After creating a cardArray to store card objects, I went through each item in the array to generate images as cards. These card images were then appended to the grid div as children. Additionally, I set up an event listener for the shuffle button. However, ...

Decoding HTML with PHP

I'm facing an issue with creating a Web page Parser. The structure of the page is as follows: <TABLE WIDTH=80%> <tr><td colspan=7><BR><BR></td></tr> <TR> <Td colspan=7><FONT FACE="arial" align ...

Can we be confident in the security and effectiveness of utilizing ajax for login implementation?

Hello, I've written the code below to verify if a user is eligible to log in to a database. I've utilized SSL to secure the connection, but I'm unsure if this is still an effective method. Could anyone provide some advice? Thank you for your ...

I have noticed that when I use VBA's FindelementbyXpath function and manually copy & paste the xpath, my code works perfectly. But when I run the code again, I encounter a NoSuchElementError. Why does this

Looking to create an "Instagram Direct Message SENDING MECRO" URL = www.instagram.com/direct/inbox driver.FindElementByXPath("/html/body/div[1]/section/div/div[2]/div/div/div[1]/div[1]/div/div[3]/button/div/svg").Click After opening the link and copying/ ...

Ways to prevent a div containing a lengthy content string from extending beyond other divs

Check out my Codepen project here Here is the HTML code for my personal website: <div id="splash" class="divider"> <h1 class="text-center text-uppercase">vincent/rodomista</h1> <p class="text-center text uppercase">Full Stack ...

Unexpected behavior occurs when attempting to run an HTML string within a Python file

After inputting the following code, I am getting a blank HTML page. Despite including an <h1> and an <a href> tag, only the <title> tag is being executed. Can anyone shed light on why this is happening and offer guidance on how to resolve ...

Is it possible to incorporate Microdata from HTML5 into an XHTML Strict website while remaining compliant?

I have a website coded in XHTML 1.0 Strict and I am looking to incorporate Microdata for breadcrumbs so that Google can better understand them. Currently, my non-microdata marked-up breadcrumbs are structured like this: <ul> <li><a href= ...

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Looking for recommendations on how to create an Android web application using HTML, CSS, and JavaScript. Any suggestions? ...