This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}
Hey guys I'm trying to create a circle with bg color. But based on my style that I attached above is not working properly. It didn't take height. Can you please tell me why? Thanks :)
You need to declare a height for a parent element to be able to use %-size on the children.
like for example:
.parent{
height: 666px; //or any %-value if the grandmother height is defined trailing back to the html-element
}
Check this fiddle out:
https://jsfiddle.net/n1o8057L/1/
It is always recommended to mention height to the parent/grandparent before you use height:100% to a child element
Try this
.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}
body{
height:100vh;
position:relative;
}
<div class="circle"></div>
If you still don't want to mention height to the body element(parent) you can define them like this
Because by default the div elements' were block elements
Block elements always have 100% width but not a definite height
so define the max-width the actual size and set its width to 100% so that it won't escape the given width.
But when it comes to height divs don't have heights by default so here set height or min-height to your required value and add max-height:100% (optional)
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can)
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
.circle {
max-width: 150px;
width:100%;
max-height: 100%;
min-height:150px;
display: block;
background: #ff4040;
border-radius:100%;
}
<div class="circle"></div>
Related
In the following fiddle:
http://jsfiddle.net/6qF7Q/1/
I have a yellow content area that has a min-height set to 100% - it's the background div to all pages and should take up at least 100% of the available height. If there's overflow, it expands vertically.
Then, within that yellow container, I have another child div (red) that I would like to take up as much vertical space as its parent. It seems I can't set height because the parent element only has min-height, and setting min-height on the red element doesn't work either.
So right now, the yellow is behaving as I'd like, but the red is not expanding. How can this be achieved with CSS only?
CSS:
.browser {
background-color: blue;
height: 600px;
width: 200px;
position: relative;
}
.innercontent {
min-height: 100%;
background-color: red;
width: 100%;
color: white;
padding: 2px;
}
.content {
background-color: yellow;
width: 100%;
min-height: calc(100% - 30px);
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background-color: orange;
height: 20px;
}
HTML:
<div class="browser">
<div class="content">
<div class="innercontent">
This is the problem - I need this to take up 100% of the remaining yellow space, without setting the parent element's 'height' - only min-height is specified in the parent because I need to make sure that it takes up 100% of the height at least, but allow it to extend vertically if there's any overflow.
</div>
should not see any yellow
</div>
<div class="footer"></div>
</div>
Take a look at this
I added this
*{
box-sizing: border-box;
}
html, body {
/* Make the body to be as tall as browser window */
height: 100%;
}
and changed some attributes u can see at fiddle
If thats what you want you should read this article
http://css-tricks.com/a-couple-of-use-cases-for-calc/
I made that based in this use-cases
I think this might solve your issue?
I have changed the innercontent to position: absolute
http://jsfiddle.net/6qF7Q/7/
If you have text in the yellow section it will always show.
Also, you're going to have to do a bit of fiddling to get your footer positioned correctly since you are going to have an overflowing absolute element. I think a full body position: relative wrapper will solve it.
P.S I don't see why you would need a .content AND a .innercontent if you don't want the .content to show?
This works much better and doesn't give you footer grief: http://jsfiddle.net/6qF7Q/9/
I've been looking around for a while today and can't find a question that answers my specific problem.
I am designing my website and the content is in the center placed inside a div, which is the wrapper. My problem is that even though the height is set at 100%, if I add to much content, the wrapper does no stretch with the content, so the text ends up being placed outside the wrapper; it is still centered with it.
How can I fix this? The CSS I have is:
#wrapper {
position: absolute;
left: 50%;
width: 800px;
height: 100%;
min-height: 100%;
margin-bottom: 0px;
margin-left: -400px;
background-color: #F7F7F7;
border-radius: 5px;
}
Change
#wrapper{height:100%;}
to
#wrapper{height:auto;}
Fiddle here.
You could also take off the Height Property, if you need to have a minimum height of 100% before the wrapper div begins to enlarge as respective to its content. so it will be:
#wrapper{
min-height: 100%
}
not:
#wrapper{
height:100%;
min-height: 100%;
}
This question already has answers here:
CSS horizontal centering of a fixed div?
(9 answers)
Closed 7 years ago.
I want div to be center horizontally, css code is this:
<style type="text/css">
#footer{
position: fixed;
bottom: 20px;
background-color: red;
width:500px;
margin: auto;/*left:auto; right:auto;*/
}
</style>
and html code:
<body>
<div id="footer">hello world</div>
</body>
I think there is no need to explain my css code, it is almost self-explanatory, but the div is not center horizontally, is there any way to make this?
Thanks in advance.
Try this
#footer{
position: fixed;
bottom: 20px;
background-color: red;
width:80%;
margin: 0 0 0 -40%;
left:50%;
}
JS Fiddle Example
The point to be noted here is, the negative margin-left of exactly half value of width and set the left 50 % of the body
This should work well for you. It works by adding a container div.
<style>
#footer-container{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
#footer
{
width:500px;
margin:0 auto;
margin-bottom:20px;
background-color:red;
}
</style>
<div id="footer-container">
<div id="footer">hello world</div>
</div>
Put another div inside it with relative position, margin: auto.
Give the fixed one 100% width.
Otherwise you can hack it with negative margin 'trick'
div {
position: fixed;
left: 50%;
width: 500px;
margin-left: -250px;
}
If you're working with modern browsers you can use the flexbox layout module: http://caniuse.com/#feat=flexbox.
Flexbox documentation: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Note: Can't post more than two links due to my rep.
JSFiddle.
(Using a footer tag instead of a div#footer as it's simpler.)
<div id="footer-container">
<footer>hello world</footer>
<div>
#footer-container {
bottom: 20px;
position: fixed;
display: flex;
justify-content: center;
width: 100%;
}
footer {
width: 500px;
background-color: red;
}
justify-content: center; 'centers' #footer-container's children, which is just the footer element in this case.
This is very similar to Nick N.'s solution, except that you don't have to reset the text-align property on the footer, and that this is probably the non-'trick' way that you wanted.
The accepted solution is slightly off because the footer's width in that case is variable (80%) instead of at 500px.
To other readers, if your parent is a form element, and the child is an input element, use flex: 1; on the input (child) element, and use max-width: 500px; instead of width: 500px;. Using flex: 1; should make the input element expand to fill the form element's width, which it might not otherwise do.
So I'm trying to build a pure CSS responsive square (well actually I'm trying to build a circle but that's easy once I've got the square.)
In other words:
I want a div that has a height that is a percentage of the body and a width that is equal to that (or vice versa).
The div also needs to have another div inside it which can contain content and overflow: auto.
Lastly, the div can never exceed the height (or width) of the body or viewport.
So far, I have got some solutions working partially (i.e. in portrait but not landscape) using a 1px transparent .gif as an img to fill out a wrapper div. Not ideal semantics but I don't see how this can be done without it.
<div class="wrap">
<img src="http://www.neurillion.com/p/35/static/media/images/1x1t.gif" />
<main>
<div class="content">
<h2>Title</h2>
<p> Lorem... etc. </p>
</div>
</main>
</div>
Here are my CSS solutions and what is wrong with them:
This works except it exceeds the height of the body in landscape (max-height in any of the elements does not solve this):
.wrap {
background: blue;
margin: 10% auto;
width: 70%;
position:relative;
text-align:center;
}
.wrap img {
border: 1px solid black;
height: auto;
width: 100%;
}
main {
background: red;
display: block;
border-radius:50%;
height: 100%;
width: 100%;
position: absolute;
top:0
}
main div {
background: green;
overflow: auto;
display:inline-block;
height:70%;
width: 70%;
margin-top:15%;
}
Codepen
Next I added a landscape media query to swap around the height and width values. Same problem.
#media(orientation:landscape) {
.wrap {
margin: auto 10%;
height: 70%;
width: auto;
}
}
Codepen
At this point I started looking into .wrap's parent elements , namely the body and html. (Resource on the difference between them.) I added height and max-height: 100% to both of them, but no joy. I've also tried adding another div container as I thought it might be easier to control the height, but that doesn't seem to be doing much either.
And now I'm pretty much out of options. I'm fairly sure the solution is something to do with the html and body elements and the way they are so eager to expand vertically but I'm not really sure how else to stop them doing so.
Any help much appreciated.
You can use vw, vh and vmin to scale the square:
Demo: http://jsfiddle.net/r9VQs/
CSS (changed part only):
.wrap {
background: blue;
margin: 0 auto;
max-width: 90vh;
max-height: 90vh;
position:relative;
text-align:center;
}
You can also use vmin (which gives better results but is less well supported) and forego the image:
Demo: http://jsfiddle.net/r9VQs/2/
CSS:
.wrap {
background: blue;
margin: 0 auto;
width: 90vmin;
height: 90vmin;
position:relative;
text-align:center;
}
vh, vw and vmin are units equivalent to 1% of their respective viewport dimensions (vh is viewport-height, vw is viewport-width and vmin is whichever has a smaller value).
Please see http://caniuse.com/#feat=viewport-units for browser support.
I'm trying to develop a horizontal web page, with fixed height and variable width.
In order to get it, I need a row of floating <div>s to expand the <body> width.
|------------- body --------------| /* variable width */
|-div-| |-div-| |-div-| |-div-| /* fixed width */
The following code doesn't seem to work:
body{
height: 40px;
}
div{
width: 2000px;
height: 20px;
background: red;
margin: 10px;
float: left;
}
http://jsfiddle.net/7cS2R/12/
Is is possible to do so without using javascript?
Block elements expand to the full width of their parent-element's width. To make them respect their childrens with you can either declare:
display: inline-block;
or
position:absolute;
on your body-element.
EDIT: after you clarified your question - simply add the white-space declaration to your body:
white-space:nowrap;
Demo
Try this:
body{
height: 40px;
display: inline-block;
}
http://jsfiddle.net/7cS2R/6/