CODEWITHSUNDEEP
cssheighttextarea
user3546284
user3546284

Reputation:

Does CSS height depend on width?

I have a textarea and I want it to be in the left of the screen, but with a small margin. So I thought I'd set height:98%; and width:48%; and then margin:1% 1% 1% 1%;. But, the height is more then 98% (it is off the screen), and in this is the same in all major browsers (chrome, opera, firefox, IE, and safari, all latest versions). However, opening the debugging console in chrome changes the textarea's height, even though it (the debugging console) only affects the width of the screen. Why is this, and how can I fix this? Here is my code:

<html>
  <head>
    <title>Why oh why</title>
    <style>
      body { margin:0px;padding:0px; }
      #fullscreen
        {
        position:fixed;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background:rgba(168,168,168,1);
        }
    #input
      {
      resize:none;
      width:48%;
      height:98%;
      margin:1% 1% 1% 1%;
      float:left;
      border:0px;
      padding:0px;
      }
    </style>
  </head>
  <body>
    <div id="fullscreen">
      <textarea id="input" rows="10" cols="50"></textarea>
    </div>
  </body>
</html>

Upvotes: 0

Views: 1048

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106048

vertical margin or padding in % takes parent's width as reference, so when you say margin:1%; on a screen of 1200px wide, it gives a margin of 120px , no matter wich height is the window

See explanation, reminder on WC3 :http://www.w3.org/TR/CSS2/box.html#margin-properties

Here a codepen to play with and see what vertical-padding in percentage involves in the layout :)

Upvotes: 1

Related Questions