image height 100% doesn't work

  • (2 Pages)
  • +
  • 1
  • 2

21 Replies - 3585 Views - Last Post: 27 September 2013 - 12:34 PM

#1 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

image height 100% doesn't work

Posted 06 September 2013 - 12:54 PM

Hi, I'm trying to get an image to go the whole height of the screen, but its not working. I put the height to 100% but that didn't do it.
Is This A Good Question/Topic? 0
  • +

Replies To: image height 100% doesn't work

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,410
  • Joined: 12-December 12

Re: image height 100% doesn't work

Posted 06 September 2013 - 01:17 PM

..then what did you do?
Care to share some HTML and CSS?

Anyway, height:100% is based on the percentage of the element's parent-height. So if the parent doesn't stretch to the full browser-height then neither will the image.

If the image is not contained within another element then its parent is the body.

html, body {
    height: 100%;
}

If the image is contained in another element then this element would also need to be given this height (or a specific pixel, or other units, height) before a height of 100% would work, and so on for the parent's parent.

Note, however, that if the body has (top or bottom) margins, padding or borders then these will be added to the height of the image, and it will not stop at the bottom of the viewport (assuming the content height is less than the viewport height).

html, body {
    height: 100%;
    padding: 0; border: 0; margin: 0;
}

This post has been edited by andrewsw: 06 September 2013 - 01:38 PM

Was This Post Helpful? 2
  • +
  • -

#3 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: image height 100% doesn't work

Posted 06 September 2013 - 02:10 PM

I added height to the body tag but that didn't help. here 's the code. . .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#leftSide {
	float: left;
	height: 100%;
}
#mainContent {
	height: 300px;
	width: 500px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	border-top-color: #009;
	border-right-color: #009;
	border-bottom-color: #009;
	border-left-color: #009;
}
body {
	height:100%; 
}
</style>
</head>

<body>
<div id = "leftSide">
<img src="assets/road.jpg" width="50%" height="100%" alt="Dirt">
</div>
<div id="mainContent">
hi
</div>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,410
  • Joined: 12-December 12

Re: image height 100% doesn't work

Posted 06 September 2013 - 02:40 PM

In HTML5 an image's height and width attributes should be supplied in pixel values (without the 'px' suffix), not percentages. (Percentages could be used before HTML5.)

Nevertheless, when I run your code the image occupies a full height (allowing for margins, etc., and the content that follows it).

I don't know what your intention is, but I suspect that the image should be a background to an element (partly based on your use of the id 'leftSide').
Was This Post Helpful? 0
  • +
  • -

#5 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: image height 100% doesn't work

Posted 06 September 2013 - 02:47 PM

I will work on it next week but thank you so much for the input. :)
Was This Post Helpful? 0
  • +
  • -

#6 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: image height 100% doesn't work

Posted 11 September 2013 - 11:40 AM

I have been doing some reading and would it be better to put that image as a background images for that div? That div would grow height wise as I add more content to the body, right? I'm just wanting to know if my logic is right. Here's the code now. . .

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

</head>

<body>
	<div id="leftSidebar">
		<figure>
   	    <img src="assets/road.jpg" width="200" height="200" alt="road">
        </figure>
    </div>
	<header>
    	<hgroup>
        </hgroup>
	    	<nav>
    	    </nav>
    </header>
    
    <footer>
    </footer>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,410
  • Joined: 12-December 12

Re: image height 100% doesn't work

Posted 11 September 2013 - 12:18 PM

It is a little hard to decide as your document has no content.

Very often an image can be a background to an element. Obviously, if it needs to sit behind content ;), but also if it's purpose is decorative, rather than being integral to the content of the page. Your use of the HTML5 figure-tag suggests that the image is an important element of your page.

Note: The hgroup-tag was intended to group headings h1..h6 together, but it has been removed from the W3C specification.

This post has been edited by andrewsw: 11 September 2013 - 12:20 PM

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,410
  • Joined: 12-December 12

Re: image height 100% doesn't work

Posted 11 September 2013 - 12:30 PM

Quote

That div would grow height wise as I add more content to the body, right?


If you mean after you've set the div's height as a percentage of the body then, yes, it will increase (assuming the div has no other parent to constrain its height).
Was This Post Helpful? 0
  • +
  • -

#9 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: image height 100% doesn't work

Posted 11 September 2013 - 04:11 PM

Percentage is a unit of measurement, how exactly does a unit get deprecated? That makes no sense.

Now is it confusing and should not be used in general unless you know how it behaves? Yes.

The thing about percent is that it's relative to the parent element, which if the parent element is only 100px, then 100% is 100px in the child element minus whatever padding and other styling is on the parent.
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,410
  • Joined: 12-December 12

Re: image height 100% doesn't work

Posted 12 September 2013 - 10:21 AM

View PostLemur, on 11 September 2013 - 11:11 PM, said:

Percentage is a unit of measurement, how exactly does a unit get deprecated? That makes no sense.

The height and width attributes for an img could previously be specified as percentages. These percentages were still of the containing element. These attributes are used by the browser to allocate room for the image; however, until the page is fully rendered, it is not possible to determine the rendered height and width of the containing element - so these percentage values could not be reliably, or consistently, determined by the browsers.

I should say that I haven't found a written confirmation of the above details, but I am confident in the statement ;)
Was This Post Helpful? 0
  • +
  • -

#11 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: image height 100% doesn't work

Posted 20 September 2013 - 02:36 PM

I'm still having problems with this. here 's the current code.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="lon.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container">
  <div class="sidebar1">
	<img src="assets/road.jpg" width="100%" height="100%" alt="road" />

<!-- end .sidebar1 --></div>
  <div class="content">
	<header> 
   	  <img src="assets/logo.jpg" width="439" height="135" alt="logo ">
<nav>
  <a href="homeTest.php" tabindex="1" accesskey="H">Home</a>
  <a href="aboutMe.php" tabindex="2" accesskey="A">About Me</a>
  <a href="contact.php" tabindex="3" accesskey="C">Contact Me</a>
</nav>
	<div id="photos">
    	<img src="assets/couple.jpg" width="80" height="71" alt="couple"><!--picture came from https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&oq=family+&gs_l=img.3..0l10.60419.60720.0.65568.7.4.0.0.0.0.144.316.3j1.4.0....0...1ac..26.img..4.3.172.EfFzboI_D4w&q=family#hl=en&q=couple+&tbm=isch&imgdii=_ -->
        <img src="assets/forgiveness.jpg" width="100" height="67" alt="forgive "><!--this picture came from https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&q=forgiveness&oq=forg&gs_l=img.1.0.0l10.432338.531398.0.538817.11.8.3.0.0.0.174.1071.0j8.8.0....0...1ac.1.26.img..0.11.1084.JlerqVJLo-4#facrc=_&imgdii=_&imgrc=ebKrSk37ZGr6aM%3A%3BG0_SPpfIYVo-4M%3Bhttp%253A%252F%252Fpaulocoelhoblog.com%252Fwp-content%252Fuploads%252F2012%252F06%252Fforgiveness.jpg%3Bhttp%253A%252F%252Fpaulocoelhoblog.com%252F2012%252F06%252F06%252Fforgiveness%252F%3B432%3B288 -->
      <img src="assets/men.jpg" width="100" height="64" alt="men"><!-- image can be found on https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&q=men%27s+group&oq=men%27s+gr&gs_l=img.3.1.0l4j0i10j0l2j0i10j0l2.10469.34358.0.43322.11.9.1.1.2.1.181.1108.1j8.9.0....0...1ac.1.26.img..2.9.817.y7_Q2DlUg2g#facrc=_&imgdii=_&imgrc=pbDQwD5VV-4dyM%3A%3BYfceYvmaZLzjsM%3Bhttp%253A%252F%252Fwww.heartofthecitychurch.org%252Fimg%252Fhow_we_connect_men.jpg%3Bhttp%253A%252F%252Fwww.heartofthecitychurch.org%252Fhow_we_connect.php%3B428%3B273 -->
      <img src="assets/family.jpg" width="100" height="67" alt="family "> <!--image came from https://www.google.com/search?hl=en&site=imghp&tbm=isch&source=hp&biw=1280&bih=860&oq=family+&gs_l=img.3..0l10.60419.60720.0.65568.7.4.0.0.0.0.144.316.3j1.4.0....0...1ac..26.img..4.3.172.EfFzboI_D4w&q=family#facrc=_&imgdii=_&imgrc=OkMHJw64_lvMhM%3A%3Bsn0JIiafz_FTMM%3Bhttp%253A%252F%252Fwww.imgion.com%252Fimages%252F01%252FComplete-Familiy-.jpg%3Bhttp%253A%252F%252Fwww.imgion.com%252Fimg%252Ffamily%252Fpage%252F16%252F%3B1600%3B1066-->
       </div>
     </header>
	<div id="mainContent">
    test
     </div>
    <!-- end .content --></div>
    <div class="sidebar2"> 
	<img src="assets/road.jpg" width="100%" height="100%" alt="road" />
<!-- end .sidebar2 --></div>
    <div class="footer">
    <!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
html, body (
	height: 100%;
)
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;/*original width 80%;
	max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */

.sidebar1 {
	float: left;
	width: 20%;
	background-image: url(assets/road.jpg);
	background-repeat: no-repeat;
}
.content {
	padding: 10px 0;
	width: 60%;
	float: left;
}
nav {
	background-color: #B1977C;
	width: 200px;
	margin-left:auto;
	margin-right:auto;
 }

.sidebar2 {
	float: right;
	width: 20%;
	background-image: url(assets/road.jpg);
	background-repeat: no-repeat;
}
header {
	background-color: #735435;
}

/* ~~The footer ~~ */
.footer {
	padding: 10px 0;
	background: #6F7D94;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
#photos {
	margin-right:auto;
	margin-left:auto;
	width:400px;
	padding:5px;
}
#mainContent {
	background-color: #e6dace;
	height: 100%;
	width: 100%;
}
</style>[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */

<![endif]



Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,410
  • Joined: 12-December 12

Re: image height 100% doesn't work

Posted 20 September 2013 - 03:06 PM

"I'm still having problems" is not sufficient, you need to describe the problems, not just post your code.

However, on a brief look, this is invalid css:

html, body (
    height: 100%;
)

With this:
<img src="assets/road.jpg" width="100%" height="100%" alt="road" />

I explained earlier that percentages should no longer be used for these attributes.

And you haven't given your container div any height.

I recommend that you also validate your html and css, there are links in my signature; and re-read the previous responses to your question.

This post has been edited by andrewsw: 20 September 2013 - 03:07 PM

Was This Post Helpful? 0
  • +
  • -

#13 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: image height 100% doesn't work

Posted 20 September 2013 - 03:28 PM

So should the actual image Be in pixels and the cssbe in percentage?
Was This Post Helpful? 0
  • +
  • -

#14 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 175
  • Joined: 31-October 11

Re: image height 100% doesn't work

Posted 25 September 2013 - 04:54 PM

When I validate the html file everything is good, but when I try to validate the css file it keeps wanting to validate it in html4. Can someone please help me understand what is wrong?
/*@charset "utf-8";
 CSS Document */
html, body (
	height: 100%;
)
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;/*original width 80%;
	max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */

.sidebar1 {
	float: left;
	width: 15;
	height:100%;
	margin-bottom:auto;
	border:dotted;
	border-color:#C0C;
	background-image: url(assets/road.jpg);
	background-repeat: no-repeat;
	margin-bottom:auto;
}
.content {
	padding: 10px 0;
	width: 60%;
	float: left;
}
nav {
	background-color: #B1977C;
	width: 200px;
	margin-left:auto;
	margin-right:auto;
 }

.sidebar2 {
	float: right;
	width: 20%;
	background-image: url(assets/road.jpg);
	background-repeat: no-repeat;
}
header {
	background-color: #735435;
}

/* ~~The footer ~~ */
.footer {
	padding: 10px 0;
	background: #6F7D94;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
#photos {
	margin-right:auto;
	margin-left:auto;
	width:400px;
	padding:5px;
}
#mainContent {
	background-color: #e6dace;
	height: 100%;
	width: 100%;
}
</style>[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */

<![endif]



This post has been edited by mindiapolis: 25 September 2013 - 04:55 PM

Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,410
  • Joined: 12-December 12

Re: image height 100% doesn't work

Posted 25 September 2013 - 05:02 PM

You are using the css validator aren't you?
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2