CODEWITHSUNDEEP
csshtml
MD.MD
MD.MD

Reputation: 718

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

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

Upvotes: 1

Views: 940

Answers (6)

user1853181
user1853181

Reputation: 785

First, are you sure that the element isn't already displayed?

You can test it like this:

#calculator #screen{
    background: white;
    width: 95%;
    height: 15%;
    background-color: black;

Update: This displays nothing.

If that doesn't work, try this:

#calculator #screen{
    background: white;
    width: 100px;
    height: 100px;
    background-color: black;

Update: This displays the black box. We see that the problem is in the undefined width and height for the parent elements, so we can do one of the two things:

1) Either put some contents on the web page, or

2) Define width and height for one of the parent elements, for example body (as shown here)

body {
    width: 100px;
    height: 100px;
}

This resolved the problem nicely.

Rest of the old answer:

If nothing, then your structure is wrong.

Keep in mind that the proportional width and height works only as long as the parent element (container) has a defined width and height.

Check if it is defined and it should work as expected.

Upvotes: 1

Jason
Jason

Reputation: 901

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

Upvotes: 1

Mahdi jokar
Mahdi jokar

Reputation: 1267

#calculator #screen{
  background: white;
  min-width: 95% !Important;   /*added Important*/
  min-height: 15% !Important;   /*added Important*/
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5%;
  position: relative;
}

Upvotes: 0

SKeurentjes
SKeurentjes

Reputation: 1878

You've got to give the element a display a height and a width.

Example:

#screen {
    position: fixed;
    width: 95%;
    height: 15%;
}

Upvotes: 0

user2952253
user2952253

Reputation:

You cant position your html, if you want to position your whole website just make a div, position it fixed.

Though i dont know why..

Every once a time i check w3 schools

http://www.w3schools.com/cssref/pr_class_position.asp

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

this should work

#calculator #screen{
    background: white;
    min-width: 95%;   /*added min-width and min-height */
    min-height: 15%;
    width: 95%; /* you may need to add something like this, but try without first*/
    height: 15%;  /* you may need to add something like this, but try without first*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5%;
    position: relative;
}

Upvotes: 0

Related Questions