JSFiddle
<header>
<p>
header stuff
</p>
<div id="dropdown">
<p>
a
</p>
<p>
b
</p>
<p>
c
</p>
</div>
</header>
I have a header that's fixed. Inside this I have a dropdown which i want to be 100% height of the page, yet setting height to 100% makes it 100% height of the parent element. Is there anyway to set it to be 100% of the page?
change .dropdown to:
#dropdown{
position: absolute;
width: 100%;
height: 100vh;
background: tomato;
top: 100px;
}
updated fidde here
Related
So my understanding, which is demonstrated by the code below, is that :hover is true for a block element if the mouse is over the area defined for the element, or over any of its overflowed content or children. Note that the .outer div turns blue even if it is not over the text content, in particular.
I haven't yet been successful in isolating a small test case from an extremely complex page, however, which demonstrates that in some cases, the :hover effect only happens for the content, and the blank areas of the element do not cause :hover to be enabled.
This happens in both Firefox and Chrome. So my question is, what feature(s) causes blank regions of a div to be ignored for :hover effects? I haven't found reference in the css documents to such interactions, neither by starting at the description of the :hover feature, or any other references I can find to :hover.
And the other question would be, if there is some feature(s) that causes such behavior, would be conformant to the standard, or a bug in the browsers?
.outer:hover { background: blue; }
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div><div class=outer>
<p class=inner>item 1</p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>
#victoria I came to a solution, if there is no height give p float:left; clear:both; and hover on outer should make paragraph color blue that will remove white space hover.
Hope this will help !
.outer p{ float: left; clear:both;}
.outer:hover p{ background: blue; }
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div><div class=outer>
<p class=inner>item 1</p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>
If I understand correctly you want the same blue background area on hover but only while hovering on the "item 1" text. For this I would use a pseudo element to create the background color. One minor changes needed to the HTML, add a new unique class to the "hover trigger element:
<p class="inner trigger">item 1</p>
Then remove the rule for .outer:hover and add position: relative to the .outer div that will serve as the bounds of the blue background pseudo element we will add:
.outer {
// ...pre-existing CSS for .outer
position: relative;
}
Now you can have an absolutely positioned pseudo element with the blue background, only on hover of the "item 1" element:
.trigger:hover:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
z-index: 0;
}
.content:hover {
background: #00c;
color: #cff;
cursor: default;
padding:0.2em;
}
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div><div class=outer>
<p><span class="content">item 1</span></p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>
The thing to remember is that with respect to CSS and HTML pages, there is a concept of a box model:
The CSS box model describes the rectangular boxes that are generated
for elements in the document tree and laid out according to the visual
formatting model.
See more here
So, if you just wish the background to be blue over specific text, you can target that text with SPAN tags and then assign a class, such as combining the pseudo hover class with .content, the class of the pair of SPAN tags enveloping "item 1". Note, I took the liberty of adding some other things to the hover event, such as also changing the color of the text and adding a little padding.
If you mean to hover over the div containing the text content and then have only the text content background and possibly text colors change, you could use JavaScript to program these changes, as follows:
var divs = document.getElementsByTagName("div");
var spans = document.getElementsByTagName("span");
divs[1].onmouseover = function() {
spans[0].style.backgroundColor = '#00c';
spans[0].style.color = '#ccf';
};
divs[1].onmouseout = function() {
spans[0].style.backgroundColor = '#fff';
spans[0].style.color = '#000';
};
.outer:hover {
cursor:crosshair;
}
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div>
<div class="outer">
<p><span>item 1</span></p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>
I have some floated elements and the container height is set to be at minimum the size of the viewport (min-height: 100vh), overflow: hidden.
However, in a responsive view (480x320) I find that the div is not expanding to contain the div which is holding the floated items. Therefore, the floated elements are cutting out of the div altogether as such:
I have tried adding the clearfix but this does not work.
HTML:
<div class="wrapper">
<div class="clients" id="clients">
<h2 class>Clients</h2>
<div class="clientLogoContainer">
<div class="clientLogo">
<img src="assets/ethiopian.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/kenya.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/southafrican.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/qatar.jpg" class="fullSizeLogo">
</div>
<div class="clientLogo">
<img src="assets/coalindia.jpg" class="fullSizeLogo">
</div>
</div>
CSS:
.clientLogoContainer {
max-width: 100%;
margin-left: 0;
margin-right: 0;
position: absolute;
top: 50%; /* move the div's top border to the half height of the outer div*/
transform: translateY(-50%); /* move the inner div up by half its height */
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.clearfix { /* used for the navigation bar to prevent li items from crashing into same line as the logo */
content: " ";
display: block;
clear: both;
}
Non-responsive view
I am having some issues positioning an image within a parent div. I have 2 divs side by side both within a parent div, the first div within the container contains text and the second contains an image. The parent container has no height specified so it adjusts to the height of the content contained within it. I am struggling to absolutely position the image in the 2nd div to the bottom. Below is my HTML and css...
<style>
.container{
width: 100%;
}
.box{
float: left;
width: 49%;
}
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
</div>
I have tried to give .image a relative position and then give the img tag within it 'position: absolute: bottom: 0px;' however this does not seem to work as .image has no fixed height.
Thanks, any help would be appriciated.
That should do the work. In fact, your container has no height at all with 2 floated div inside of it. I use a clear:both to... clear the floats and give the container the proper height.
<style>
.container{
width: 100%;
position: relative;
}
.box{
float: left;
width: 49%;
}
.image img {
position: absolute;
bottom: 0;
right: 0;
}
.clear { clear: both; }
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
<div class="clear"></div>
</div>
You can find more infos about floats and clear on this nice article on css-tricks.com
Below I have some HTML code. Everything is positioned relative apart from contentRow which is positioned absolutely. This is making the footer stick to where the browser window ends and not where the scroll bar ends.
Is there any way I can make the footer go down to the very bottom where the scroll bar ends.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative">
<div class="globalHeader">
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute">
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative">
</div>
</div>
Theres a few available flavours of the solution for this but they basically go something like this.
EXAMPLE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
a point to remember is that height of elements in html are always passed through the parent. so if you dont define height 100% on a parent the child won't know either. Good luck and let me know if you have any other issues :)
SOURCE
http://mystrd.at/modern-clean-css-sticky-footer/
If I'm understanding correctly, you could make s4-bodyContainer position:relative so that the contentRow is only positioned absolutely within that container. Then footer would go below the bodyContainer.
I am working on getting the layout sorted for a pretty simple gallery webapp, but when I use an HTML5 doctype declaration, the height of some of my divs (which were 100%) get shrunk right down, and I can't seem to plump them back up using CSS.
My HTML is at https://dl.dropbox.com/u/16178847/eyewitness/b/index.html and css is at https://dl.dropbox.com/u/16178847/eyewitness/b/style.css
If I remove the HTML5 doctype declaration, all is as I want it to be,
but I really want to use the proper HTML5 doctype declaration.
If I set the doctype to HTML5 and make no changes, the div with the photo and the footer divs are not visible, presumably because they are 0px high.
If I set the doctype to HTML5 and make the body { height: 100px } and .container { height: 100px } or .container { height: 100% }, it becomes visible, but what I need is it to be is full height rather than a height in pixels.
If I try to do the same as above, but with the body { height: 100% } the photo and footer divs are not visible again.
What do I need to do to get it 100% in height so that my photo and footer divs are full height?
Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.
So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.
See this example, to make it clearer:
html, body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
This wouldn't work, if I didn't give 100% height to—say html element:
body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
… or .inner
html, body, .outer, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
Indeed, to make it work do as follow:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Scrolling Demo</title>
<style>
html, body {
width: 100%;
height: 100%;
background: white;
margin:0;
padding:0;
}
.page {
min-height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="nav" class="page">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="page1" class="page">
<h1><a name="about">about</a></h1>
About page content goes here.
</div>
<div id="page2" class="page">
<h1><a name="portfolio">portfolio</a></h1>
Portfolio page content goes here.
</div>
<div id="page3" class="page">
<h1><a name="contact">contact</a></h1>
Contact page content goes here.
</div>
</body>
</html>
I got stuck into a similar problema to size a canvas, so here is what i did and worked perfectly.
Besides doing the:
body{ width: 100%; height: 100%;}
Set the desired element like this:
.desired-element{ width: 100vw; height: 100vh}
In that way you are assured to have 100% of the view port in width and height.
vw stands for viewwidth
and
vh stands for viewheight
I hope this helps someone