Css div height background color

Background color does not show when setting a div height to auto! Why?

The background-color of #container does not show when I set its height to auto. But it does show when I set it to a fixed height like 1000px. I’ve tried «overflow:auto», but it didn’t work. How can I fix it? I do want #container to vertically expand according to its content and I want to show its background color as well. Any idea will be much appreciated! Here is the HTML:

 
 
text text text text text text text text text text text texttexttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
 
text text text text text text text text text text text texttexttext
 
 

#container < background-color: rgb(255, 102, 204); height: auto; width: 1200px; position: absolute; >#container #main < background-color: rgb(204, 51, 0); height: auto; width: 900px; position: absolute; overflow: auto; >#container #main #div1 < background-color: rgb(0, 204, 255); float: left; width: 300px; padding: 5px; height: auto; margin: 20px; >#container #main #div2 < background-color: rgb(0, 153, 153); height: auto; width: 400px; float: left; margin: 10px; >.clear

3 Answers 3

the problem you have is that #main div have position:absolute; . You have to take on account that element with position:absolute; or position:fixed; are removed from normal flow, so they basicly are not inside their parent.

for more details on that you can check w3schools

All of you elements are either positioned absolutely or floated, that won’t compute a height for the parent. Try setting a min-height on some of your elements or atleast on the container.

Give me a moment and I’ll try to set up a jsfiddle with a solution 🙂

. See lazychio’s answer, its what you’re looking for.

simply add overflow:auto; in .css file for example:

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

How to set background-color on 50% of area CSS

I want to have a div, and inside this div must be a field with some color. So i want to have div for example 200px x 200px and set background-color:gray which size ll be 100px x 100px, and start at position 50px 50px. Please look at this snippet with code:

So as You see the background color filled all div width and height. Is this possible to make background to fill only 50%? Note: The red area should be transparent.

6 Answers 6

The background looks like this:

background: linear-gradient(to bottom, grey 0%, grey 100%) no-repeat; 

background-size: calc(100% - 100px) calc(100% - 100px); background-position: center; 

The calc reduces the size of the background by exactly 100px and the transparent space around the div when centered is 50px in width.

Full example

The second div shows the true size of the div and the 20vw width and height shows how the div can be re-sized.

div < background: linear-gradient(to bottom, grey 0, grey 100%) no-repeat; background-size: calc(100% - 100px) calc(100% - 100px); /* Reduce height of background by 100px and width by 100px*/ background-position: center; padding: 80px; /* 50px border + 30px additional padding */ width: 20vw; height: 20vw; min-width: 200px; min-height: 200px; >div.no-gradient < background: grey; >/*For example*/ html, body < height: 100%; margin: 0; >body < background: linear-gradient(to bottom, black 0%, white 100%); >div

some text
 
I am the same size as the other div

Updated in 2019 as browsers now demand calc(100% — 100px) twice in the background-size , one for the x and y axis.

Other answers have provided good workarounds. Here is the cold hard truth:

You can’t set a background color for half an element’s content area

A background color applies to an elements content area. You can’t apply a background color to half of an element’s content area.

The content area is the area containing the real content of the element. It often has a background, a color or an image (in that order, an opaque image hiding the background color) and is located inside the content edge; its dimensions are the content width, or content-box width, and the content height, or content-box height.

The content area of an element has exactly one background color. The color may be transparent, and may be inherited rather than defined, or entirely covered — but still, there is always one, and there can be only one.

Inspected elements in a browser developer’s tools will help you get familiar with this.

There are many workarounds for the effect you are asking to create, including nested elements, pseudo elements, and thick borders.

Источник

Background color of div only certain height

I have a transparent div and i want to set background color to only 60% of the whole size of div. Example: I have a content with image on my website. Let say that 60% of the content i want to have background color set to white, the upper part of the content stays transparent.

Here is an example: http://jsfiddle.net/318wsehf/ I want to have red only on last two paragraphs. The first paragraph should stay transparent, as its set in the outer div. How do i apply this styling? I have changed refer : http://jsfiddle.net/318wsehf/1/

Please post the relevant HTML within your question, otherwise this question will be meaningless if JSFiddle goes down.

9 Answers 9

If you want to split the background, independent from your paragraphs, you could use a gradient:

If it needs to be split exactly between the paragraphs, use one of the other nth-. solutions.

Check this out, two posibilities:

First example. You have a gradient and with % you can set up which % do you want to fill with that color.

background: linear-gradient(to top, #f6d8d8 70%,rgba(0,0,0,0) 60%); 

And the other hand you can just change the location of your tag. With this example Second example

You can give following way:

thank you this what i needed. I suggest please provide details as of what does 70% and 30% means so that other users can know exactly what changes they need. BTW thanks man.

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies cursus placerat. Aenean euismod convallis scelerisque. Etiam eget ex dolor. Phasellus diam mi, egestas eu massa vel, pellentesque bibendum augue. Quisque porttitor neque mauris, ac vehicula magna porttitor eget. Phasellus nec interdum nunc. Quisque euismod nulla pellentesque enim posuere posuere. Nullam nunc nunc, efficitur nec interdum sit amet, malesuada pretium dui. Sed convallis felis ut laoreet ultricies.
 
Phasellus vel convallis elit, at lacinia lectus. Vivamus sed libero at nibh dapibus auctor. Quisque aliquam facilisis turpis, quis tincidunt justo. Fusce sit amet porta ipsum. Vestibulum eget metus commodo, laoreet ex eget, pellentesque dolor. Cras ac vulputate nisl. Quisque tempus sapien condimentum, convallis metus egestas, vehicula erat. In vel purus risus. Maecenas tristique eget massa eget interdum. Pellentesque gravida ut mi vel maximus. Nulla nec justo mattis, ullamcorper sem at, tempor eros. Integer pretium vel nunc non ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.
 
Integer elementum nulla sit amet justo varius laoreet. Mauris nec porttitor est, tincidunt gravida dui. Duis tempor pharetra felis. Suspendisse potenti. Etiam convallis cursus turpis, eget finibus est suscipit eget. Aenean vitae eros nulla. Etiam congue ipsum velit, eu ultrices turpis tincidunt id. Morbi eu sodales lorem. Vivamus vel aliquet enim, sit amet tincidunt ex. Phasellus luctus nunc eget lobortis fermentum. Nullam ex felis, interdum ac odio sed, lacinia dignissim nisi. Aenean dolor lorem, placerat vitae suscipit et, aliquet vel leo.
 

Bind last two tags in one separate and apply class=»test» to that div.

Источник

Div height and background-color [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

I have tried overflow and using clear: both; but I can’t get the child div heights to be equal, I don’t want the heights to be static. Can someone help me achieve this? Here is fiddle showing the problem.

3 Answers 3

Since you seem to have static widths, but you don’t want static heights, you could fix it by setting the container div to position: relative; and then having one div float left, and positioning the other div ‘s absolutely. Something like in this jsFiddle .

The one floating div will ensure the container div has a height, and the absolutely positioned div ‘s will automatically resize to the same height as the floating div . You would then have to set overflow-y: auto on the absolutely positioned div ‘s to ensure that scroll bars will appear inside of them if their height exceeds the height of the floating div . This should work in all browsers.

div.container < position: relative; width: 800px; // height will be determined by the content of div.left >div.left < float: left; width: 400px; // height will be determined by its content >div.middle, div.right < position: absolute; overflow-y: auto; width: 200px; bottom: 0px; // These two lines will ensure that this div's height top: 0px; // is equal to the height of div.left and div.container left: 400px; // Value should be equal to the width of div.left >div.right < left: 600px; // Value is the sum of the width of div.left and div.middle. >

P.S. If all you want is for the background-color to fill the whole container div (as your post title suggests), you could just set the background-color on the container div .

Источник