how to make the position of div is fixed even though it's empty?


Tags: css,html

Problem :

I want to make all of my html elements position is fixed, but I faced this problem:

there is a div named screen, this div is empty bby default, so its appear only after adding inner HTML to it. I want to make this div appears even though it's empty.

here is my css:

html{

    margin-top: 10%;
    position: fixed;
}

#calculator{

    background: gray;
    width: 40%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 1px;
    overflow: hidden;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

#calculator #screen{

    background: white;
    width: 95%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5%;
    position: relative;
}

so how I can do that?

jsFiddle



Solution :

You need to drop the HTML styles, and replace it with BODY styles:

body{

    padding: 10% 0px 0px 0px;
    margin: 0px;
    position: fixed;
    height:100%;
    width:100%;
    box-sizing: border-box;
    overflow:none;   /*  Gets rid of scroll bars.  Ditch it if you have a problem.  */
}

Rarely should you mess with the HTML element. You needed to specify a height and width for your page (the document BODY). The calculator and screen divs are by default positioned relative to the body, so it needed to be assigned width and height. It is probably a matter of opinion, but you may consider adding "position:relative;" to all of these divs (edit: except the BODY element. Can be fixed or absolute). It is the default property, but when you start adding buttons, if you position them absolutely, they will be positioned absolutely to the closest nesting div. Since that is important, you should probably take the time to make the markup a little more semantic.

The padding shortcode sets all padding but the top at zero. This is a browser reset. Same with margin:0px;. You should not add a margin to the body, because if you assign a background color, it may not move up into that margin area. In fact, if you set a background for your HTML element, it would be different than the body's margin.

The overflow:none; is to prevent scrollbars. It shouldn't be a problem based on what you are doing, but if for example you had lots of content, say 3000 pixels tall, then it would be hidden with no mechanism for the visitor to see it. In short, overflow:none; on the body gets rid of anything "below the fold."


    CSS Howto..

    How can I change css stylesheet with dart?

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    ABBR tooltip CSS styling: How to suppress original tooltip, add rounded corners? [duplicate]

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    How to create class in a custom CSS file by JavaScript?

    How to add local css file to a page in WebView?

    CSS - How make the page scroll over the edge of the window

    How to find the place where font-size for input is set?

    How to draw the following shape using CSS3 [duplicate]

    How do I get Aptana Plugin for Eclipse to validate against CSS3, rather than CSS2?

    Show header below fixed nav when clicking hash tag link

    How to override display: table cell

    How to prevent a closing tag from being removed?

    How to Make Image Do All 3: Cover (left-to-right), Resize, and Scroll

    How do I make text text when you hover the mouse over it?

    CSS 2 Sass: How do I change the output format of the generated SCSS?

    How to align Navbar at bottom of window, but have content under this in CSS?

    CSS/HTML : how to make something become absolute positioned once you scroll by it

    How do you create tabstops in XHTML?

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

    How can I find which file or code affected to my code in html, css

    CSS simple menu - how to align?

    CSS how to change color of a specific primary-panel in a if-block

    How to apply css mark on videogular time line at specific time

    How to target itemid=“” in CSS

    How do I get my divs to ease in right after eachother on page load?

    How to emulate window title bar in CSS/HTML

    How do I get the slide in as you scroll down (CSS Trick) technique to work in Safari?

    How do I style a circular vertically-loading progress bar?

    How can I make a fluid width, fluid height, fixed header table with jQuery?