-1

I want my logo to fit, then my navigation to fit and then the picture below to fit to the bottom of the page without having the scroll bars. If I resize the image then I want the picture inside the division to change in size but not the other divisions above. How do I do that?

This is my site: http://recordspreservation.org/index2.html

j08691
  • 204,283
  • 31
  • 260
  • 272
Marcos Camargo
  • 133
  • 9
  • So you basically want the upper part (Navigation & Logo) to be always on screen? – realappie Feb 28 '16 at 20:39
  • This is a website that works the way I want. I want to have the image fill the rest of the page and resize as the page is also resized: https://familysearch.org/ark:/61903/3:1:939J-TR9T-RR?mode=g&wc=M5VB-W3L%3A371870001%2C374386301%2C375090101%3Fcc%3D2177299&cc=2177299 – Marcos Camargo Feb 28 '16 at 20:43
  • Yes, I want the logo and nav to always appear and then the photo to fill what is left of the viewing port. I don't want scroll bars. – Marcos Camargo Feb 28 '16 at 21:02
  • I want the window to show as much of the logo and nav without scroll bar and as the window grows then the photo starts showing without scroll bar too. – Marcos Camargo Feb 28 '16 at 21:07
  • Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](http://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! – j08691 Feb 28 '16 at 21:55
  • `
    `     – Marcos Camargo Feb 28 '16 at 23:56

1 Answers1

0

How about something like this:

html, body {
  height: 100%;
}

header {
  height: 30%;
  background-color: #eee;
}

img {
  display: inline-block;
  height: 70%;
}
<header>
  <h1>Title</h2>
</header>


<img src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
Charlie Egan
  • 4,878
  • 6
  • 33
  • 48
  • Is there a way of not specifying a number such as 70vh and let the browser fill the rest of the window with the image? – Marcos Camargo Feb 28 '16 at 21:41
  • I've updated my example. If this is what you're after you should close the question as it's similar to this: https://stackoverflow.com/questions/20039141/css-auto-fill-height – Charlie Egan Feb 28 '16 at 21:55
  • Charile, Please take a look at my website now. The iframe comes from a photo in google drive. If I use the widget to move around the photo, I can't see the bottom of the photo.How do I fix that? – Marcos Camargo Feb 28 '16 at 23:54