SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    How to make <div> height responsive?

    Hi guys,

    I have a <div> tag and the CSS properties are below,
    Code:
    #header{ 
    	background-color:#333;
    	height:150px;
    }
    So how to make this responsive?

    Thank you very much in advanced.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I think I solved the problem.

    The solution,
    Code:
    #header{ 
    	background-color:#333;
    	width: 100%;
    	height: 20%;
    }
    Quality codes are optimized and tested...
    Click here for inspiration..

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    No, the right answer is:
    Code css:
     
    A div is display: block by default so will be 100% wide.
    If you don't set a height then it will be the height of it's contents.
    You need no styles at all to make a div responsive


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •