Having trouble getting a resizable DIV inside a 100% height DIV with margin to work properly. Any tips or assistance would be greatly

I've encountered a common issue that is slightly different from others I've come across. Despite my best efforts, I have been unable to find a solution on my own. If anyone could offer me some guidance on this, I would greatly appreciate it.

The problem lies in having a #wrapper div that spans 100% width and height of the browser. This part works fine. However, within this #wrapper, I need a #content div that automatically adjusts its size with the parent div while maintaining a 30px margin around it. I've come close to achieving this, but I am struggling to make the #content div stretch in height. Here's an example of what I'm attempting:

Below is the CSS code I am currently using:

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

html, body {
  height: 100%;
  width: 100%;
  text-align: center;
  cursor: default;
}

#wrapper {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  position: absolute;
  background: #333;
  text-align: center;
}

#content {
  /*width: 100%;*/
  min-height: 100%;
  height: auto !important;
  margin: 30px;
  overflow: hidden;
  background: #ccc;
}

Here is the corresponding HTML code:

<body>

<div id="wrapper">

  <div id="content">
    This DIV should stretch to 100% height of its parent and body 
    minus the 30px margin around it and resize as the window is resized.<br />
    It's working in width but not in height!<br /><br />
    Anything placed inside this div (a child div) regardless of its size should not exceed the boundaries of this div (as the Overflow property is set to "hidden")!
  </div>

</div>

</body>

In both Chrome and IE, I'm encountering the following issue:

If anyone has any insights or suggestions on how to resolve this issue, please let me know. Could it be possible to achieve what I desire, or am I overlooking something obvious?

Thank you in advance, LM

Answer №1

To update your .css file, substitute #content with the code snippet below:

#content {
  overflow: hidden;
  background: #ccc;
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;  
}

Answer №2

.main-content {
  min-height:80%;
  position:relative;
  margin: 7%;
  overflow: hidden;
  background-color: #999;
}

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 is the procedure for altering a particular element using ajax technology?

I have an AJAX request that updates the user information. I need to retrieve a specific value from the response and update the content of a specific element. For example, here is the element that needs to be changed: <div id="changeMe"><!-- New ...

How can I set up a cycling image background for the main div and a floating menu?

I was wondering how I could keep a cycling image background stationary behind the main content while scrolling through the page. You can check out the project itself by following this link. Feel free to use any of the code, including the fixed header menu, ...

What is the process for sending an email to a designated recipient through an HTML form and then storing it as a record in an HTML table?

<!-- Placeorder part --> <div data-ng-show = "isPlaceOrder"> <div class = "col-lg-10" style = "margin-top:80px"> <div class="panel panel-primary"> <div class = "panel-heading">Drug Request Mail Sender</div&g ...

Utilizing personalized markers to encapsulate correct HTML elements

Recently, I came across a discussion on the implications of using custom tags in HTML. After reading about it, I have decided to avoid using custom tags in order to adhere to standards and ensure that search engine bots can properly read my code. However, ...

Trouble embedding iframes in local files?

I have recently created a file which includes the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <style> iframe { height: 500px; width: 600px; } ...

What is the best way to incorporate bullet points into a textarea?

How can I make a bullet point appear when pressing the 'enter' button inside a textarea? I tried using this code, but it doesn't seem to work. Any suggestions? <script> $(".todolist").focus(function() { if(document.getElementById( ...

Leveraging the power of jQuery Validation in conjunction with Bootbox

I am currently facing an issue with integrating the jQuery validation plugin with bootbox.js (modals). The modal contains a form with fields that require validation. To showcase my problem, I have set up a jsFiddle here: http://jsfiddle.net/rDE2q/ Upon ...

Do not incorporate a div in the overlay

I have an image inside a container. When hovering over the image/container, overlay information is displayed (which is currently working correctly). The overlay should cover the entire container (the grey part) where the image is located. The product-tit ...

What is the best way to use CSS to connect the tips of shapes for perfect alignment?

In an attempt to utilize CSS3 for creating shapes and aligning them to resemble a certain image, I have successfully crafted a pink square along with 4 gray rectangles. Initially, my approach involved creating separate div elements for each shape and adjus ...

Ways to limit the display of search result page numbers at the bottom of the search results page using PHP

I'm experiencing an issue with limiting the number of search result pages in my PHP page. Currently, I have 3 fields for user input and the search results are displayed at the bottom. When all fields are selected, the page numbers keep increasing at ...

Incorporating ContentPlaceHolder in ASP.NET MasterPage

For my In-Application CMS project, I am considering allowing users to upload an HTML and a CMS file as the Masterpage. One solution I have in mind is to have users include Pre-Defined Tags within their HTML files, which I can then replace with ContentPlac ...

Can Vuetify's grid system seamlessly integrate with the Bootstrap grid system?

According to information from the Vuetify documentation: The Vuetify grid draws inspiration from the Bootstrap grid. It involves the use of containers, rows, and columns to organize and align content. If I utilize Bootstrap grid classes in a Vuetify pr ...

Troubleshooting a Custom Menu Control in HTML

Would you mind taking a look at the menu I have set up in this fiddle: http://jsfiddle.net/Gk_999/mtfhptwo/3 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", ...

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

Which specific html container or element can be found on the mymsn pages?

When accessing mymsn, users have the ability to personalize the content and layout of their webpage. I am curious about what type of container is being utilized for this customization - does it involve an html element, or perhaps javascript, or something e ...

Background image of HTML Iframe element does not display - Inline style block

https://i.stack.imgur.com/JW26M.png After setting the iframe's innerHTML using this line of code: iframedoc.body.innerHTML = tinyMCE.activeEditor.getContent(); The styles for the elements within the iframe are contained in an inline style block. Ho ...

Enhancing the functionality of hidden input fields using jQuery

I'm looking to dynamically update the value of a hidden input element when a button is clicked. Here's what I have so far: Hidden Input Element: <input type="hidden" value="action" id="action" /> Buttons: <INPUT name=submit value=~#S ...

What could be the reason that the Mui button styles are not being applied even after setting it to 'contained'?

Upon updating to the most recent version of MUI, I've noticed a problem with MUI buttons when using the contained variant. <div className="flex"> <Button variant="contained" color="primary" fullWidt ...

Can you explain the concept of a host server?

Hello, I am new to using cPanel and I recently uploaded a script to my domain directory. While trying to install the script, I was prompted to input my host server information. You can view the screenshot here: https://i.sstatic.net/rrVEX.png ...

Question about the origin of style sheet source files [*.css?ver=]

Can you explain the purpose of appending a query string to the end of a style sheet? I frequently come across examples like this: some-stylesheet.css?ver=1.2.3 Appreciate your insights. ...