响应式布局问题div布局

我有三个div，我试图在高度调整时在页面上垂直均匀对齐。一个在顶部对齐，一个在中间，一个在底部。当我调整页面时，底部始终位于顶部，顶部位于顶部，而中间位置则保持中间位置，它们之间的间距均匀，因此它们都保持可见。我需要使用媒体查询吗？这是我迄今的尝试。响应式布局问题div布局

<body> 
    <div id="pageWrapper"> 
     <div id="top"></div> 
     <div id="middle"></div> 
     <div id="bottom"></div> 
    </div> 
</body> 
#pageWrapper { 
    width:100%; 
    height:100%; 
} 
#top { 
    width:200px; 
    height:200px 
} 
#middle { 
    margin-top:50%; 
    width:200px; 
    height:200px 
} 
#bottom { 
    width:200px; 
    height:200px 
    position:absolute; 
    bottom:0; 
}

来源

2014-02-24 nick

这是错误的做法。如果你真的需要这个，我建议使用display: table和display: table-row。不要忘记设置height: 100%为html和body标签来传播整个页面。然后，您为每个div设置#pageWrapper和display: table-row，并设置display: table。

这是一个EXAMPLE它是如何工作的。尝试调整框的大小，以便在行动中看到它。

而这里的CSS：

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#pageWrapper { 
    width: 100%; 
    height: 100%; 
    display: table; 
} 
#top, #middle, #bottom { 
    display: table-row; 
} 
#top { 
    width: 200px; 
    height: 200px; 
} 
#middle { 
    width: 200px; 
    height: auto; /* height will adjust automatically */ 
} 
#bottom { 
    width: 200px; 
    height: 200px; 
}

来源

2014-02-24 20:38:21 matewka

如果我想垂直对齐中间div ent中心我会使用vertical-align：middle？ – nick

不幸的是没有。但是你可以在你的'＃middle' div中加入另一个div，例如'＃middleInner'并将此样式添加到它：'vertical-align：middle; display：table-cell;'。在我更新的[FIDDLE]（http://jsfiddle.net/vCL6G/2/） – matewka

很酷的谢谢你看。 – nick

如果支持旧的浏览器是不是一个大问题，您可以使用css's calc()

Working Example

html, body { 
    height:100%; 
    width:100%; 
} 
#pageWrapper { 
    width:100%; 
    height:100%; 
} 
#top { 
    width:200px; 
    height:calc(100%/3 - 10px); 
    background: red; 
} 
#middle { 
    width:200px; 
    height:calc(100%/3 - 10px); 
    background: blue; 
    margin-top: 15px; 
    margin-bottom: 15px; 
} 
#bottom { 
    width:200px; 
    height:calc(100%/3 - 10px); 
    background: green; 
} 
p { 
    position:relative; 
    top:calc(50% - 10px); 
}

如果您需要支持旧的浏览器，你不介意Rube Goldberg方法你可以使用jQu红霉素：

Working Example

var rubeGoldberg = function() { 
    $('#top, #middle, #bottom').height($('body').height()/3 - $('body').height() * 0.02); 
    $('#middle').css({ 
     marginTop: $(document).height() * 0.03, 
     marginBottom: $(document).height() * 0.03 
    }); 
    $('p').each(function() { 
     $(this).css({ 
      top: $(this).parent().height()/2 - $(this).height()/2 
     }); 
    }); 
}; 

$(function() { 
    rubeGoldberg(); 
}); 

$(window).resize(function() { 
    rubeGoldberg(); 
});

或者，如果jQuery是不是真的是你的味道，这里的大致相同鲁贝戈德堡的做法是Vanilla JS

Working Example

function rubeGoldberge() { 
    var secElems = document.getElementsByClassName('sec'); 
    var mid = document.getElementById('middle'); 
    var paraElems = document.getElementsByTagName('p'); 
    for (var i = 0; i < secElems.length; i++) { 
     secElems[i].style.height = window.innerHeight/3 - window.innerHeight * 0.02 + 'px'; 
     mid.style.margin = window.innerHeight * 0.03 + 'px 0px'; 
     paraElems[i].style.top = (paraElems[i].parentNode.clientHeight/2) - paraElems[i].clientHeight/2 + 'px'; 
    } 

    mid.style.margin = window.innerHeight * 0.03 + 'px 0px'; 
} 

window.onload = rubeGoldberge(); 
window.addEventListener('resize', rubeGoldberge);

来源

2014-02-25 01:30:24 apaul

响应式布局问题div布局

回答

相关问题