CODEWITHSUNDEEP
css
breezy
breezy

Reputation: 3

Is there a way in css to have something be 100% of window size when its container is only 25%?

I'm trying to make a picture menu that when clicked has the other options slide away and show the entire image of the option clicked. The images are lined up and I'm using overflow hidden to hide the parts that I don't want shown until their clicked. The animation works fine but if the browser window is larger then the image width then it leaves white space where the image runs out of room. I can set the image to a new width during the transition but it makes the transition look strange as the size of the image is changing too which I don't want.

Is there a way to set something to the size of the window even if its container isn't that size?

http://jsfiddle.net/539Y9/ - A basic jsfiddle is here. Its harder to tell since I don't have images and you'll probably need to look at dev tools to see the size of the divs but I want those divs to be 100% and hidden by its parent container.

HTML:

<div id="imageMenu">
  <ul>
    <li class="imageMenuItem"><div id='image1'></div></li>
    <li class="imageMenuItem"><div id='image2'></div></li>
    <li class="imageMenuItem"><div id='image3'></div></li>
    <li class="imageMenuItem"><div id='image4'></div></li>
  </ul>
</div>

CSS:

#imageMenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#imageMenu li {
  text-decoration: none;
  float: left;
  width: 25%;
  z-index: 0;
}

#image1 {
  width: 100%;
  height: 25px;
  background-color: red;
}

#image2 {
  width: 100%;
  height: 25px;
  background: green;
}

#image3 {
  width: 100%;
  height: 25px;
  background-color: blue;
}

#image4 {
  width: 100%;
  height: 25px;
  background-color: yellow;
}

Upvotes: 0

Views: 45

Answers (2)

James Donnelly
James Donnelly

Reputation: 128791

I'm not sure what animation you're referring to, but you can use the vw unit to size the element relative to the viewport instead of its parent.

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

The initial containing block here is the root element in your document, not the element's parent.

#image1, #image2, #image3, #image4 {
    width: 100vw;
}

JSFiddle demo - notice how the yellow div element at the end stretches by the same width as the entire result pane? All your div elements here are doing this but are being covered by the next one along.

Here's a second demo where I've added a hover effect to your div elements to show how this works.

Upvotes: 1

Ulrich Thomas Gabor
Ulrich Thomas Gabor

Reputation: 6654

Just specify width: 400% on the images.

Since you split the original width into 4 by using 25%, you can get the original width at the child element again if you multiply its width by 4. Which is 400%.

Upvotes: 2

Related Questions