I have unintentionally been learning HTML in quirks mode, now that I have put <!DOCTYPE html> tag in, it's throwing off what I've learnt so far. At this point I'm struggling to understand using percentages for heights and when to use VH...
Here is a fiddle, along with some questions: https://jsfiddle.net/kittenslayer123/q9dm1zmu/4/
My goal and thought process:
1.Have body wrap around multiple sections - so I set body's min-height:100%
2.Each section is to be 100% of window - so I set .section height: 100vh
Each section should initially be 100vh but expand to wrap around contents - in this case .section-child.
I want section to be 100vh and expand depending on content (section-child) - The way I set it, the 3rd section-child overflows onto the next section.
Can I set .section height to 100vh without using vh?
Why is my .section not expanding? even though I have set min-height:100vh
I am really struggling to understand why or how to achieve this.
Your section is not expanding because there is nothing in it. Once you fill it with content it will expand (granted that it exceeds 100vh)
Related
I hope you are well.
I'm building a page in React that takes up 100% of the view height and has overflow disabled. My trouble comes when I have an animated Footer that the user can bring up that condenses the Content in order to make room for itself. I've described this in the following image. Please excuse the spelling errors.... I am incompetent.
Right now, I've got the Header and Footer set to absolute and fixed to the top and bottom of the page respectively, and I'm trying to get Content to adapt using Flex grow, but thus far it seems unresponsive....
Thanks for your time!
PS
I'm pretty sure this sucker answers my question, but I haven't gotten any of the flex changes to take affect(effect?).
Make a div fill the height of the remaining screen space
Your footer and header as set to absolute thus they are excluded from flexbox layout. Remove position: absolute, set your main container (whatever it is that wraps all 3 of those) to display: flex; flex-direction: column, set desired height for your header and footer and then add flex-grow: 1 to your content container so that it takes entire remaining space
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
I'm using http://ryanfait.com/sticky-footer/ to make footers stay at the bottom. I was previously using height: 100%; on html and body to make it fill the whole page when the page was smaller than the viewport. However, this makes the body stop (no background) after the viewport, but the rest of the page continues. Stocky Footer doesn't have much to do with it, but it's an example of the code.
I've tried using min-height: 100%;, but that's not working either. Can't figure this one out, any help would be great.
Edit
The website is http://www.markduffymusic.com/index.php
To ensure that the footer is always at the absolute bottom of the page you can use the answer provided in this question: Make div stay at bottom of page's content all the time even when there are scrollbars
For this to work with background images, you must place the background-image on a single element that takes the full height of your page, which in this case is your #holder div.
You also have two floating elements in #pagecontainer which are not being cleared, meaning the browser will not assign a set height to #pagecontainer. To resolve this you need to as overflow: hidden to the #pagecontainer element.
Here is a useful CSS Tricks article about The How and Why of Clearing Floats.
I have been working on a project using Compass with the 960.gs plugin. It's worked quite well so far, giving results that look nearly identical across browsers with little effort. I've run into a small problem, however.
The div I am using as 960's main grid container has a vertically tiled background in CSS. I need this background to extend all the way to the bottom of the browser's viewport, but it would seem that 960's use of floats is somehow conflicting with this.
Despite the container's height being set to 100%, the background only extends part of the way down the screen when overflow is unspecified. Setting overflow to hidden fixes it, but hides the scrollbars!
How can this be dealt with? I've used Webkit's inspector look through the code and DOM for problems and as far as I can see there's nothing that should cause this behavior.
It's not online and the code is too large to copy and paste here, but I will recreate the structure in abbreviated psuedocode:
<html>
<head></head>
<body>
<primary background div>
<960 container div>
<header div>Stuff</div>
<main content div>More Stuff</div>
<footer div></div>
</div>
</div>
</body>
</html>
I've scanned the CSS is there is nothing problematic. I'm not floating anything and the most I'm doing is small padding and margins...
It's hard to tell without the actual code, but the prerequisite for block to stretch at 100% is one of these:
It's parent have an absolute set height (like 100px etc.).
Or all parent of this block till HTML tag must have height: 100%.
So, look at this example: http://jsfiddle.net/kizu/UvAxV/ — there on frame hover HTML and BODY get height: 100% and the wrapper stretches to 100% too.
So, in your case, you must to make sure that HTML, BODY and “primary background div” all have height: 100%
i made myself a Speed Dial-like homepage with links I visit the most.
Now, i made it elastic, so when browser window is narrowed horizontally, the boxes getting narrower too.
What I want is that when browser window is narrowed vertically, that boxes get narrower again.
I tried with several percentage height rules but it didn't work, need help.
Here is the page I'm working on its one-file page so CSS is not separated.
http://www.purplerspace.com/dl/
You have to add the height percentages to almost all the divs if you want it to work. Add height: 100% to html, body then the wrappers and also the lis and yeah, the a style too.
Don't know if it's optimal but tables for this should work. Set the table height and width to 100%. And don't forget to set your html and wrapper tag to 100% in height.