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..

    CSS to keep middle image in 100% width slideshow always in center

    How to tilt inner element forward when tilting outer back with css 3d transforms

    I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

    How to use base css file using twig

    How can i make a fixed box inside a div with scroll?

    How can I align a logo AND a heading to the centre of a page?

    CSS Clouds - How to adjust to inner content?

    How to target CSS module classes after they are hashed?

    My jquery slideshow is not functioning properly

    How to get conditional css to work on Blogger/Blogspot?

    How to center css menu and get rid of left margin space in ie?

    how to disable drupal7 system css files?

    CSS how to automatically resize div size?

    How to make my words not go under my picture in css

    How can I create a postage stamp border?

    How to apply customized css to SSRS report

    How to get my navbar to fluidly contain the largest element?

    How to put background after anchor tag throw css?

    How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

    How to define CSS rules relative to previously defined values witout re-writing them?

    Two buttons vertically misaligning, how to align them properly?

    HTML4 strict: border=“0” is deprecated, how to replace it

    How to set z-index in css background

    Prevent div from showing after slideUp() - jQuery

    Modify CSS class “two” if class “one” is not shown on screen

    How to set css attribute for pseudo element in Dart

    how to fix the css padding in this situation?

    How can I exclude certain elements from css property that has been applied to their parent without using the style attribute

    How to make html elements move up/ down as image height resizes using only css and html

    how to change style of a css element using jQuery