styling inner div height

I am working on a container with 100% height and it's functioning perfectly

My goal is to have the Client Content take up 80% of the container. I envision it to be like this

View Example Image

Below is the HTML and CSS for my page:

CSS


*
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}

#container
{
    min-height: 99%;
    border-color: #36A9E9;
    border-width: thin;
    border-style: solid;
    width: 85%;
    margin: 0 auto;
    background-color: ThreeDFace;
}
* html #container
{
    height: 100%;
}
#ClientContent
{
    min-height: 80%;
    border-color: #36A9E9;
    border-width: thin;
    border-style: solid;
    width: 100%;
    margin: 0 auto;
    background-color: ThreeDFace;
}

HTML 

<body>

<form id="container" runat="server">

<div id="ClientContent">

</div>
</form>
</body>

If you have any suggestions or ideas, please let me know!

htmlcss

Answer №1

This solution appears to be functional here

*
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}
#container
{
    position: relative;
    min-height: 99%;
    border-color: #36A9E9;
    border-width: thin;
    border-style: solid;
    width: 85%;
    margin: 0 auto;
    background-color: ThreeDFace;
}
* html #container
{
    height: 100%;
}
#ClientContent
{
    position: absolute;
    height: 80%;
    border-color: #36A9E9;
    border-width: thin;
    border-style: solid;
    width: 99.6%;
    margin: 0 auto;
    background-color: ThreeDFace;
}

Answer №2

To resolve the issue, ensure that the vertical alignment is set to top within the #ClientContent section. It's possible that this adjustment was overlooked. Additionally, consider adding max-height:80% to the code. See below for the updated snippet:

#ClientContent
{
max-height:80%;
vertical-align:top;
min-height: 80%;
border-color: #36A9E9;
border-width: thin;
border-style: solid;
width: 100%;
margin: 0 auto;
background-color: ThreeDFace;
}

Answer №3

Insert #Clientcontent {height:80%}

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 to incorporating Ember into an existing HTML file

Planning to integrate Ember 2.0 into an existing HTML page and have a few queries regarding this. Is it necessary to build the ember project beforehand? This results in creating appname.js and vendor.js files. Which js files are essential to be included ...

javascripthtmlember.js

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

javascripthtmlcssioshomescreen

When using AJAX, the image may not appear on the initial request but will display on subsequent requests

I encountered a peculiar issue where I am trying to display a loading spinner icon while making an AJAX request. Strangely, the spinner does not appear for the first request (such as after manually refreshing the page) but shows up for all subsequent reque ...

htmljquerycssajax

Can you provide me with a method to establish a redirect using a bypass URL?

Is it possible to create a redirect with a bypass URL like this: http://example.com/oldpage?bypass=1 This would skip the redirect. But http://example.com/oldpage Would actually lead to http://example.com/newpage Appreciate all the help in completing ...

javascriptphphtmlscripting

Efficiently rendering a million elements on an HTML canvas (and replicating the render from the server)

I'm currently working on developing an HTML application using a canvas as the base. The canvas will consist of a large grid, around 1500 x 700 in size, totaling to over 1 million cells. The main concern is how to efficiently render this grid without ...

javascripthtmlcanvas

"Adjusting the font size in a blogger's photo caption: A quick guide

I recently switched templates for my blog and I'm having trouble adjusting the size of the caption text under the photos. The template I'm currently using is called Awesome Inc. If you need more information, you can visit my blog here: https:// ...

htmlcss

What is the best way to have text wrap around an icon in my React application?

I am facing an issue while trying to display the note description over the trash icon in a React app. I have tried various methods but can't seem to achieve the desired effect. Can anyone guide me on how to get this layout? Here is what I intend to a ...

javascripthtmlcssreactjstypescript

Dividing an Image into segments using Javascript

I'm currently working on a basic Jigsaw puzzle project. To achieve this, I am required to divide the image I've selected into 20 separate pieces. I was wondering if there is a method in Javascript that can automatically cut an image into 20 equal ...

javascripthtml

Is your CSS not reflecting changes in Node.js?

I am having trouble getting the CSS to update in the browser using Browser Sync via Gulp on Node.js. What could be the issue? Below is my Gulp.js file: var themename = 'playtest haha 1'; var gulp = require('gulp'), // Prepare ...

htmlnode.jswordpressnpmgulp

Looking to preserve the "ALL" selection in a JavaScript-CSS filter?

On the front page, there are approximately 16 posts displayed along with a filter featuring 4 drop-down menus showcasing post categories. I have assigned category names as classes to each post div and am currently using javascript to hide them. The code s ...

javascriptjqueryhtmlcss

"Effortlessly moving elements using Phonegap's drag and drop

Can you explain the steps involved in implementing drag and drop functionality using PhoneGap? Are there any specific javascript functions or libraries that can be used for this purpose? ...

htmldrag

Chrome does not allow the use of a CSS property for hover that has been used for animation

One issue I encountered is that when using a CSS property for animation and then also using the same property for a hover effect in Google Chrome, the hovering effect does not work properly. Below is the animation code: @keyframes fadeInUpBig { 0% { ...

htmlcsscss-animations

What is the best way to center a CSS arrow vertically within a table cell?

I'm having trouble with aligning a CSS arrow next to some text inside a table cell... <td><div class="arrow-up"></div> + 1492.46</td> My goal is to have the arrow positioned to the left of the text and centered vertically wit ...

htmlcsshtml-tablealignmentvertical-alignment

mandatory data fields for an HTML form

I'm having some trouble creating an HTML form with mandatory input fields. The code I have so far is shown below: <div class="col-sm-6"> <label for="city" class="form-control">City ...

javascriptphphtmlcsstwitter-bootstrap

Mobile devices are unable to properly implement the Jquery show/hide feature

Currently, I am working on a small Russian project and facing some challenges with the mobile version of my website: php8098.github.io/breakfast. The issue lies within the first slider where the play button should trigger a modal window to open. I urgentl ...

javascriptjquerycss

Hyperlinks functioning properly in Mozilla Firefox, yet failing to work in Internet Explorer

I'm encountering issues with my links not functioning properly in Internet Explorer. <a style="text-decoration:none;" href="<?php echo base_url();?>index.php/person/create/<?php echo $this->uri->segment(4);?>" > When I check ...

htmlcodeigniterinternet-explorer

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

javascriptjqueryhtmlcss

The HTML div element is not expanding to the full width of the screen on an iPhone device

Recently, I encountered an issue while testing my website on the iPhone. The footer was not covering the full width, especially on Safari browser. After some digging, I realized that the problem might be caused by an absolutely positioned DIV called #leaf- ...

htmliphoneioscss

How to target the following element with CSS that has a specified class name

Would it be possible to achieve this using CSS alone, or would I need to resort to jQuery? This is how my code currently looks: <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr class="some-class">...</tr> // My g ...

jquerycssselector

Is there a way to resolve the header iframe bug?

UPDATE: Issue Resolved! If you encounter the same problem, use the following solution: Replace nav { position: fixed; width: 100%; } with nav { position: fixed; width: 100%; z-index: 10; } I am currently working on a responsive website design using Bo ...

htmlcssimageiframebootstrap-4