1

Alright, I'm trying to make my application (image slider) dynamic. By doing this I only set an max-width on "#application" and not an height. The only time I set the height is when I append the first slide to "#application" and take the height of the "$current_slide" (first slide), then I set the height on the ".content_container" (which contains the slides) by using the parent height (the height on "#application").

Now here comes the (for me unlogic) problem: When I set the height from the current_slide height it adds an extra 6 pixels and I can't understand why..

(If more code is needed, let me know)

HTML-structure (As you can see application height says 476px, but the slide img height is 470px..)

<div id="application" class="application" style="height: 476px;">
    <div class="application-content-container" style="height: 476px;">
        <div id="slide-0" class="application-content" style="width: 700px;">
            <img alt="01" src="images/01.jpg">

JavaScript

// Get first slide & add
var current_slide = getSlide(current_id);
content_container.append(current_slide);

// Set application height based on loaded slide
application.css('height', current_slide.height());

// Set content container height based on parent height
content_container.height(parseInt(application.height()));

CSS

.application {
    position: relative;
    background: #CCC;
    margin: 0 auto;
    max-width: 700px;
}

.application-content-container {
    position: relative;
    overflow: hidden;
}

.application-content {
    position: absolute;
    top: 0;
    left: 0;
}

.slide img {
    width: 100%;
}
4

0 回答 0