javascript - How do I scale this layout? - Stack Overflow

admin管理员组

文章数量:1356097

Been working on this layout for some time now and each way I take I run into some sort of obstacle (v1 of this here: )

What I'm trying to do now is to have the size of .spread adapt to the browser windows width and height, so it'll never exceed what the user currently can see in their browser (.spread currently have fixed width/height, for demo purposes). The ideal would to be able to resize on the fly and it adapts instantly (i.e. no media queries).

It works as it should in the v1 version I link to above, but then I had problems with the fade effect due to that .spread lacked an actual width/height.

Here's the new demo:

UPDATE: The markup can be changed as long as it works as described.

<div class="scrollblock" id="scroll_spread-1">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>
<div class="scrollblock" id="scroll_spread-2">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>

<div class="contentblock" id="spread-1">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <img src=".jpg">
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-2"><img src=".jpg"></a>
                </div>
            </div>  
        </div>  
    </div>  
</div>

<div class="contentblock" id="spread-2">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>           
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <a href="#scroll_spread-1"><img src=".jpg"></a>
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-3"><img src=".jpg"></a>
                </div>
            </div>
        </div>  
    </div>  
</div>

 

html {
    height: 100%;
}

body {
    background: #eee;
    line-height: 1.2em;
    font-size: 29px;
    text-align: center;
    height: 100%;
    color: #fff;
}

.scrollblock {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100%;

    overflow: hidden;
}

.contentblock {
    margin: 0;
    width: 0;
    min-height: 100%;

    overflow: hidden;

    position: fixed;
    top: 0;
    right: 0;
}

.contentblock .inner {
    z-index: 2;

    position: absolute;
    right: 0;
    top: 0;

    background: #eee;
}

.fade {
    width: 100%;
    height: 100%;

    position: absolute;
    right: 0;
    top: 0;

    background-color: #000;
    opacity: 0;

    z-index: 3;
}

.content {
    height: 100%;   
}

.content span {
   height: 100%;
   vertical-align: middle;
   display: inline-block;
}

.content .spread {
    vertical-align: middle;
    display: inline-block;
}

#spread-1 {
    color: #000;
    z-index: 105;
}

#spread-2 {
    z-index: 110;
}

.spread {

    max-height: 800px;
    max-width: 1130px;
    position: relative;
}

.spread .left {
    position: relative;
    width: 50%;
    float: left;
    text-align: right;
    height: 100%;
}
.spread .right {
    position: relative;
    width: 50%;
    float: left;
    text-align: left;
    height: 100%;
}

div.centerimage {
    overflow: hidden;
}
div.centerimage img {
    max-width: 100%;
    max-height: 100%;
}

div.centerimage span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
div.centerimage img {
    vertical-align: middle;
    display: inline-block; 
}

P.S. The title is really bad, don't know what I'm looking for, but please change to something more informative if you can think of anything better.

Been working on this layout for some time now and each way I take I run into some sort of obstacle (v1 of this here: https://stackoverflow./questions/14572569/how-can-i-contain-pos-abs-div-within-specific-area)

What I'm trying to do now is to have the size of .spread adapt to the browser windows width and height, so it'll never exceed what the user currently can see in their browser (.spread currently have fixed width/height, for demo purposes). The ideal would to be able to resize on the fly and it adapts instantly (i.e. no media queries).

It works as it should in the v1 version I link to above, but then I had problems with the fade effect due to that .spread lacked an actual width/height.

Here's the new demo:
http://jsbin./uciguf/1

UPDATE: The markup can be changed as long as it works as described.

<div class="scrollblock" id="scroll_spread-1">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>
<div class="scrollblock" id="scroll_spread-2">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>

<div class="contentblock" id="spread-1">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <img src="http://s7.postimage/8qnf5rmyz/image.jpg">
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-2"><img src="http://s7.postimage/kjl89zjez/image.jpg"></a>
                </div>
            </div>  
        </div>  
    </div>  
</div>

<div class="contentblock" id="spread-2">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>           
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <a href="#scroll_spread-1"><img src="http://s7.postimage/5l2tfk4cr/image.jpg"></a>
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-3"><img src="http://s7.postimage/fjns21dsb/image.jpg"></a>
                </div>
            </div>
        </div>  
    </div>  
</div>

 

html {
    height: 100%;
}

body {
    background: #eee;
    line-height: 1.2em;
    font-size: 29px;
    text-align: center;
    height: 100%;
    color: #fff;
}

.scrollblock {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100%;

    overflow: hidden;
}

.contentblock {
    margin: 0;
    width: 0;
    min-height: 100%;

    overflow: hidden;

    position: fixed;
    top: 0;
    right: 0;
}

.contentblock .inner {
    z-index: 2;

    position: absolute;
    right: 0;
    top: 0;

    background: #eee;
}

.fade {
    width: 100%;
    height: 100%;

    position: absolute;
    right: 0;
    top: 0;

    background-color: #000;
    opacity: 0;

    z-index: 3;
}

.content {
    height: 100%;   
}

.content span {
   height: 100%;
   vertical-align: middle;
   display: inline-block;
}

.content .spread {
    vertical-align: middle;
    display: inline-block;
}

#spread-1 {
    color: #000;
    z-index: 105;
}

#spread-2 {
    z-index: 110;
}

.spread {

    max-height: 800px;
    max-width: 1130px;
    position: relative;
}

.spread .left {
    position: relative;
    width: 50%;
    float: left;
    text-align: right;
    height: 100%;
}
.spread .right {
    position: relative;
    width: 50%;
    float: left;
    text-align: left;
    height: 100%;
}

div.centerimage {
    overflow: hidden;
}
div.centerimage img {
    max-width: 100%;
    max-height: 100%;
}

div.centerimage span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
div.centerimage img {
    vertical-align: middle;
    display: inline-block; 
}

P.S. The title is really bad, don't know what I'm looking for, but please change to something more informative if you can think of anything better.

• javascript
• html
• css
• position
• scale

Share Improve this question Follow edited May 23, 2017 at 12:04 CommunityBot 111 silver badge asked Jan 30, 2013 at 16:28 INTINT 91244 gold badges2121 silver badges4646 bronze badges 6

• Media Queries are kind of a key tool when building responsive sites. – DA. Commented Jan 30, 2013 at 16:29
• @DA Maybe I should change the tag then? What I'm looking for is more like the way this behaves: jsbin./otacuk/2 – INT Commented Jan 30, 2013 at 16:31
• Yes. Perhaps you're not really asking about responsive design but something more specific about 'scaling to browser width' – DA. Commented Jan 30, 2013 at 16:32
• Perhaps all you need here is % widths in your CSS. Post your HTML and CSS in your question please. – jfriend00 Commented Jan 30, 2013 at 16:33
• @INT did that work, do you still need help? – Parris Commented Feb 3, 2013 at 1:51

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 4

Three-Quarters of the Way to a Full Solution

This is not quite a full solution yet, as it cannot acmodate a super narrow width window size (like your old version did). However, it is a good step toward what you seek.

Here is the example.

The key things that have been changed:

Added

.spread { height: 93%; } /* You had originally wanted a height difference */

Removed

• overflow: hidden from div.centerimage.
• width: 50% from .left and .right.

maybe you could just pin your .spread divisor

.spread {
  bottom: 11px;
  left: 11px;
  right: 11px;
  top: 11px;
  position: absolute;
  /* ... */
}

This way, it will be resized the same of the viewport area.

Here a jsFiddle to demonstrate.

Carry on

I know you were probably looking for a solely CSS/HTML solution, but really you're probably best off using some Javascript. There's no way to be clean and precise just using CSS & HTML. But if you run a tiny bit of JavaScript on page load and window-resize, then your divs can have actual height/width values and scale cleanly. The trick is to have the outside div get its width/height set by the JavaScript, and then all its children use % dimensions so they grow appropriately.

Here's the basics using some JQuery:

<script type="text/javascript">
//Function to get the current window dimensions.
function get_window_dims() {
    var dims = [];
        if (parseInt(navigator.appVersion)>3) {
            if (navigator.appName=="Netscape") {
                dims[0] = window.innerWidth;
                dims[1] = window.innerHeight;
            }
            if (navigator.appName.indexOf("Microsoft")!=-1) {
                dims[0] = document.body.offsetWidth;
                dims[1] = document.body.offsetHeight;
            }
        }
    return dims;
}
function ResizeDivs {
    var dims = get_widnow_dims();
    var div_width = Math.floor(dims[0] * 0.93); // calculating the div width to be 93% of the window width
    $('div.spread').css('width',div_width+'px');
}
$(function() {
    ResizeDivs();
    $(window).resize(function(){
         ResizeDivs();
    });
});
</script>

You could easily clean up this code to be more concise, but I figured I'd put it out here this way for you to see all the parts. If you wanted to spend the extra time, you could even add more JQuery to animate the divs when the window resizes.

Hope this helps.

Have you considered using a responsive framework to solve your issue? You can set width's and heights to percentages and have min-width, min-height.

本文标签： javascriptHow do I scale this layoutStack Overflow