Mantenha a proporção de uma div com CSS
https://stackoverflow.com/questions/1495407
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu quero criar um div Isso pode alterar sua largura/altura à medida que a largura da janela muda.
Existem regras CSS3 que permitiriam que a altura mudasse de acordo com a largura, Ao manter sua proporção?
Eu sei que posso fazer isso via JavaScript, mas preferiria usar apenas CSS.
Solução
Basta criar um invólucro <div> com um valor percentual para padding-bottom, assim:
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}<div></div>Isso resultará em um <div> com altura igual a 75% da largura de seu recipiente (uma proporção de 4: 3).
Isso depende do fato de que para preencher:
A porcentagem é calculada em relação ao largura do bloco contendo da caixa gerada [...] (fonte: W3.org, ênfase meu)
Valores do fundo do preenchimento para outras proporções e 100% de largura:
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
Colocando conteúdo na div:
Para manter a proporção da div e impedir que seu conteúdo o estique, você precisa adicionar uma criança absolutamente posicionada e esticá -la às bordas do invólucro com:
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Aqui está um demonstração E outro mais detalhadamente demonstração
Outras dicas
vw unidades:
Você pode usar vw unidades para ambos largura e altura do elemento. Isso permite que a proporção do elemento seja preservada, com base na largura da viewport.
VW: 1/150 da largura da viewport. [[Mdn]
Como alternativa, você também pode usar vh para a altura da viewport, ou mesmo vmin/vmax Para usar o menor/maior das dimensões do viewport (discussão aqui).
Exemplo: 1: 1 aspecto de proporção
div {
width: 20vw;
height: 20vw;
background: gold;
}<div></div>Para outras proporções de aspecto, você pode usar a tabela a seguir para calcular o valor da altura de acordo com a largura do elemento:
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
Exemplo: grade 4x4 de divs quadrados
body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div {
width: 23vw;
height: 23vw;
margin: 0.5vw auto;
background: gold;
}<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>Aqui está um Meio com esta demonstração E aqui está uma solução para fazer um grade responsiva de quadrados com conteúdo vertical e centrado na horizontalia.
O suporte do navegador para unidades VH/VW é ie9+ veja poder para mais informações
Encontrei uma maneira de fazer isso usando CSS, mas você precisa ter cuidado, pois isso pode mudar, dependendo do fluxo do seu próprio site. Eu fiz isso para incorporar vídeo com uma proporção constante de proporção dentro de uma parte da largura do fluido do meu site.
Digamos que você tenha um vídeo incorporado como este:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
Você pode então colocar tudo isso dentro de uma div com uma classe "vídeo". Essa aula de vídeo provavelmente será o elemento fluido em seu site, de modo que, por si só, não tenha restrições de altura direta, mas quando você redimensiona o navegador, ele mudará de largura de acordo com o fluxo do site. Este seria o elemento em que você provavelmente está tentando obter seu vídeo incorporado, mantendo uma certa proporção do vídeo.
Para fazer isso, coloquei uma imagem antes do objeto incorporado na classe "Video" Div.
!!! A parte importante é que a imagem possui a proporção correta que você deseja manter. Além disso, verifique se o tamanho da imagem é pelo menos tão grande quanto o menor que você espera que o vídeo (ou o que quer que esteja mantendo o AR) seja com base no seu layout. Isso evitará problemas em potencial na resolução da imagem quando for resistente à porcentagem. Por exemplo, se você deseja manter uma proporção de 3: 2, não use apenas uma imagem de 3px por 2px. Pode funcionar em algumas circunstâncias, mas eu não o testei, e provavelmente seria uma boa ideia evitar.
Você provavelmente já deve ter uma largura mínima como essa definida para elementos fluidos do seu site. Caso contrário, é uma boa idéia fazê -lo para evitar cortar elementos ou se sobrepor quando a janela do navegador fica muito pequena. É melhor ter uma barra de rolagem em algum momento. O menor em largura que uma página da web deve obter é de cerca de 600px (incluindo colunas de largura fixa) porque as resoluções de tela não ficam menores, a menos que você esteja lidando com sites para telefone. !!!
Eu uso um PNG completamente transparente, mas realmente não acho que acaba importando se você fizer o certo. Assim:
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>
Agora você deve adicionar CSS semelhante ao seguinte:
div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }
Certifique -se de remover também qualquer declaração explícita de altura ou largura dentro do objeto e das tags incorporadas que geralmente vêm com o código de incorporação de cópia/colado.
A maneira como funciona depende das propriedades da posição do elemento de classe de vídeo e do item que você deseja manter uma determinada proporção. Aproveite a maneira como uma imagem manterá sua proporção adequada quando redimensionada em um elemento. Ele informa o que mais estiver no elemento de classe de vídeo para ter vantagem total do imóvel fornecido pela imagem dinâmica, forçando sua largura/altura a 100% do elemento de classe de vídeo sendo ajustado pela imagem.
Muito legal, hein?
Você pode ter que brincar um pouco com isso para fazê -lo funcionar com seu próprio design, mas isso realmente funciona surpreendentemente bem para mim. O conceito geral está lá.
Para adicionar à resposta do web_designer, o <div> terá uma altura (totalmente composta de preenchimento de fundo) de 75% da largura contendo elemento. Aqui está um bom resumo: http://mattsnider.com/css-using-percent-for-margin-and-padding/. Não sei por que isso deve ser assim, mas é assim que é.
Se você deseja que sua div seja uma largura que não seja 100%, você precisa de outra divina para definir a largura:
div.ar-outer{
width: 60%; /* container; whatever width you want */
margin: 0 auto; /* centered if you like */
}
div.ar {
width:100%; /* 100% of width of container */
padding-bottom: 75%; /* 75% of width of container */
position:relative;
}
div.ar-inner {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Usei algo semelhante ao truque de imagem de Elliot recentemente para me permitir usar as consultas de mídia CSS para servir um arquivo de logotipo diferente, dependendo da resolução do dispositivo, mas ainda escala proporcionalmente como um <img> Faria naturalmente (eu defini o logotipo como imagem de fundo para um .png transparente com a proporção correta). Mas a solução do Web_Designer me economizaria uma solicitação HTTP.
Elliot me inspirou a esta solução - obrigado:
aspectratio.png é um arquivo PNG completamente transparente com o tamanho da sua razão de aspecto preferida, no meu caso 30x10 pixels.
Html
<div class="eyecatcher">
<img src="/img/aspectratio.png"/>
</div>
CSS3
.eyecatcher img {
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(../img/autoresized-picture.jpg);
}
Observe: background-size é um recurso CSS3 que pode não funcionar com seus navegadores de destino. Você pode verificar a interoperabilidade (Fe em caniuuse.com).
Como afirmado em Aqui no w3schools.com e um pouco reiterado neste resposta aceita, preenchimento de valores como porcentagens (ênfase mina):
Especifica o preenchimento em porcentagem da largura do contendo elemento
Ergo, um exemplo correto de uma div responsiva que mantém uma proporção de 16: 9 é a seguinte:
CSS
.parent {
position: relative;
width: 100%;
}
.child {
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
.child > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Html
<div class="parent">
<div class="child">
<div>Aspect is kept when resizing</div>
</div>
</div>
Baseando suas soluções, fiz alguns truques:
Quando você o usar, seu HTML será apenas
<div data-keep-ratio="75%">
<div>Main content</div>
</div>
Para usá -lo desta forma: CSS:
*[data-keep-ratio] {
display: block;
width: 100%;
position: relative;
}
*[data-keep-ratio] > * {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
e JS (jQuery)
$('*[data-keep-ratio]').each(function(){
var ratio = $(this).data('keep-ratio');
$(this).css('padding-bottom', ratio);
});
E tendo isso, você acabou de definir attr data-keep-ratio para altura/largura e é isso.
Você pode usar um SVG. Torne a posição de contêiner/invólucro, coloque o SVG em primeiro lugar como estáticamente posicionado e depois coloque o conteúdo absolutamente posicionado (superior: 0; esquerda: 0; direita: 0; inferior: 0;)
Exemplo com proporções 16: 9:
Image.svg: (pode ser inlinado no SRC)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>
CSS:
.container {
position: relative;
}
.content {
position: absolute;
top:0; left:0; right:0; bottom:0;
}
Html:
<div class="container">
<img style="width: 100%" src="image.svg" />
<div class="content"></div>
</div>
Observe que o SVG embutido não parece funcionar, mas você pode usar o SVG e incorporá -lo no atributo IMG SRC como este:
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />
Como @web-tiki já mostra uma maneira de usar vh/vw, Eu também preciso de uma maneira de centralizar na tela, aqui está um código de snippet para 9:16 retrato.
.container {
width: 100vw;
height: calc(100vw * 16 / 9);
transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}
translateY manterá este centro na tela. calc(100vw * 16 / 9) é esperado a altura para 9/16.(100vw * 16 / 9 - 100vh) está em altura de transbordamento, então, puxe para cima overflow height/2 irá mantê -lo no centro na tela.
Para paisagem e mantenha 16:9, você mostra uso
.container {
width: 100vw;
height: calc(100vw * 9 / 16);
transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}
A proporção 9/16 é uma facilidade de mudar, sem necessidade de predefinido 100:56.25 ou 100:75.Se você quiser garantir a altura primeiro, você deve mudar de largura e altura, por exemplo height:100vh;width: calc(100vh * 9 / 16) Para 9:16 Retrato.
Se você deseja adaptar para o tamanho de tela diferente, também pode interessar
- tamanho de fundo tampe/conter
- O estilo acima é semelhante a conter, depende da taxa de largura: altura.
- Objeto-ajuste
- tampa/conter para img/tag de vídeo
@media (orientation: portrait)/@media (orientation: landscape)- Consulta de mídia para
portrait/landscapepara alterar a proporção.
- Consulta de mídia para
Esta é uma melhoria na resposta aceita:
- Usa pseudo elementos em vez de divs de wrapper
- A proporção é baseada na largura da caixa em vez de seus pais
- A caixa se esticará verticalmente quando o conteúdo se tornar mais alto
.box {
margin-top: 1em;
margin-bottom: 1em;
background-color: #CCC;
}
.fixed-ar::before {
content: "";
float: left;
width: 1px;
margin-left: -1px;
}
.fixed-ar::after {
content: "";
display: table;
clear: both;
}
.fixed-ar-16-9::before {
padding-top: 56.25%;
}
.fixed-ar-3-2::before {
padding-top: 66.66%;
}
.fixed-ar-4-3::before {
padding-top: 75%;
}
.fixed-ar-1-1::before {
padding-top: 100%;
}
.width-50 {
display: inline-block;
width: 50%;
}
.width-20 {
display: inline-block;
width: 20%;
}<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>SCSS é a melhor solução no meu caso; Usando um atributo de dados:
[data-aspect-ratio] {
display: block;
max-width: 100%;
position: relative;
&:before {
content: '';
display: block;
}
> * {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
[data-aspect-ratio="3:1"]:before {
padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
padding-top: 300%;
}
Por exemplo :
<div data-aspect-ratio="16:9"><iframe ...></iframe></div>
Apenas uma ideia ou um hack.
div {
background-color: blue;
width: 10%;
transition: background-color 0.5s, width 0.5s;
font-size: 0;
}
div:hover {
width: 20%;
background-color: red;
}
img {
width: 100%;
height: auto;
visibility: hidden;
}<div>
<!-- use an image with target aspect ratio. sample is a square -->
<img src="http://i.imgur.com/9OPnZNk.png" />
</div>Digamos que você tenha 2 divs, a divisão é um recipiente e o interior pode ser qualquer elemento que você precise manter sua proporção (img ou um iframe do youtube ou o que quer que seja)
HTML se parece com o seguinte:
<div class='container'>
<div class='element'>
</div><!-- end of element -->
Digamos que você precise manter a proporção do "elemento"
razão => 4 a 1 ou 2 a 1 ...
CSS se parece com isso
.container{
position: relative;
height: 0
padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/
}
.element{
width : 100%;
height: 100%;
position: absolute;
top : 0 ;
bottom : 0 ;
background : red; /* just for illustration */
}
preenchimento quando especificado em %, ele é calculado com base na largura, não na altura. .. Então, basicamente, você não importa qual a altura da sua largura sempre será calculada com base nisso. que manterá a proporção.
Embora a maioria das respostas seja muito legal, a maioria delas precisa ter uma imagem já dimensionada corretamente ... outras soluções funcionam apenas para uma largura e não se importam com a altura disponível, mas às vezes você quer se encaixar no conteúdo em uma certa altura também .
Eu tentei juntá-los para trazer uma solução totalmente portátil e infalível ... O truque é usar para escalar automaticamente uma imagem, mas use um elemento SVG embutido em vez de usar uma imagem pré-renderizada ou qualquer forma de Segunda solicitação HTTP ...
div.holder{
background-color:red;
display:inline-block;
height:100px;
width:400px;
}
svg, img{
background-color:blue;
display:block;
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
.content_sizer{
position:relative;
display:inline-block;
height:100%;
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(155,255,0,0.5);
}<div class="holder">
<div class="content_sizer">
<svg width=10000 height=5000 />
<div class="content">
</div>
</div>
</div>Observe que eu usei grandes valores nos atributos de largura e altura do SVG, pois ele precisa ser maior que o tamanho máximo esperado, pois só pode encolher. O exemplo faz da proporção da div 10: 5
Se você deseja encaixar um quadrado dentro da viewport na vista de retratos ou paisagem (o maior possível, mas nada de ficar lá fora), alterne entre o uso vw/vh na orientação portrait/landscape:
@media (orientation:portrait ) {
.square {
width :100vw;
height:100vw;
}
}
@media (orientation:landscape) {
.square {
width :100vh;
height:100vh;
}
}
Eu tropecei uma solução inteligente usando <svg> e display:grid.
O elemento de grade permite que você ocupe o mesmo espaço com dois (ou mais) elementos, sem precisar especificar qual deles define a altura. O que significa que, fora da caixa, o mais alto define a proporção.
Isso significa que você pode usá -lo como é quando você sabe que o conteúdo nunca será alto o suficiente para preencher toda a "proporção" e você está simplesmente procurando uma maneira de posicionar o conteúdo neste espaço (ou seja, para centralizá display:flex; align-items:center; justify-content:center).
É praticamente o mesmo que usar um transparente <img> com display:block e proporção predeterminada, exceto o <svg> é mais leve e consideravelmente mais fácil de modificar (para alterar a proporção de maneira responsiva, se você precisar).
<div class="ratio">
<svg viewBox="0 0 1 1"></svg>
<div>
I'm square
</div>
</div>
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
Tudo que você precisa fazer é mudar o <svg>S proporcionar:
<svg viewBox="0 0 4 3"></svg><svg viewBox="0 0 16 9"></svg>
Veja funcionando:
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
/* below code NOT needed for setting the ratio
* I just wanted to mark it visually
* and center contents
*/
.ratio div {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
Fixed ratio 7:1
</div>
</div>Se você precisar de uma solução em que o elemento de conteúdo não tenha permissão para definir a proporção quando for mais alta (com o transbordamento oculto ou automático), você precisa definir position:relative na grade e position:absolute; height:100%; overflow-y: auto; no conteúdo. Exemplo:
.ratio {
display: grid;
position: relative;
}
.ratio > * {
grid-area: 1/1/1/1;
}
.ratio > div {
height: 100%;
overflow-y: auto;
position: absolute;
/* the rest is not needed */
border: 1px solid red;
padding: 0 1rem;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.
<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.
<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
</div>
</div>Eu gostaria de compartilhar minha solução, onde tenho um img-Tag preenchendo uma certa proporção. Eu não poderia usar background Devido à falta de apoio ao CMS e eu não prefiro usar uma etiqueta de estilo: <img style="background:url(...)" />. Além disso, a largura é 100%, por isso não precisa ser definida em um tamanho fixo, como em algumas das soluções. Ele será dimensionado de forma responsável!
.wrapper {
width: 50%;
}
.image-container {
position: relative;
width: 100%;
}
.image-container::before {
content: "";
display: block;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ratio-4-3::before {
padding-top: 75%;
}
.ratio-3-1::before {
padding-top: calc(100% / 3);
}
.ratio-2-1::before {
padding-top: 50%;
}<div class="wrapper"> <!-- Just to make things a bit smaller -->
<p>
Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
</p>
<div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
<img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
</div>
<p>
Just place other block elements around it; it will work just fine.
</p>
</div>Eu já encontrei esse problema algumas vezes, então fiz uma solução JS para isso. Isso basicamente ajusta a altura do domelemento de acordo com a largura do elemento pela proporção que você especificar. Você poderia usá -lo como seguido:
<div ratio="4x3"></div>
Esteja ciente de que, como está definindo a altura do elemento, o elemento deve ser um display:block ou display:inline-block.
Diga que você para manter a largura: 100px e altura: 50px (ou seja, 2: 1) Basta fazer isso matemática:
.pb-2to1 {
padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}
Você pode usar o layout de fluxo (FWD).
https://en.wikipedia.org/wiki/adaptive_web_design
Ele escalará e manterá o layout, é um pouco complexo, mas permite que uma página redimensione sem pressionar o conteúdo como (RWD).
Parece responsivo, mas está escalando. https://www.youtube.com/watch?v=xrcbmli4jbg
Você pode encontrar a fórmula de escala CSS aqui:
Eu usei uma nova solução.
.squares{
width: 30vw
height: 30vw
Para a proporção principal
.aspect-ratio
width: 10vw
height: 10vh
No entanto, isso é relativo a toda a visualização. Portanto, se você precisar de uma div que seja 30% da largura da viewport, poderá usar 30VW e, como conhece a largura, reutilizá -los em altura usando a unidade Calc e VW.
Se toda a estrutura do contêiner fosse baseada em porcentagem, esse seria o comportamento padrão, você pode fornecer um exemplo mais específico?
Abaixo está um exemplo do que quero dizer, se toda a sua hierarquia pai foi baseada em %, qualquer ajuste da janela do navegador funcionaria sem nenhum JS/CSS adicional, isso não é uma possibilidade para o seu layout?
<div style="width: 100%;">
<div style="width: 50%; margin: 0 auto;">Content</div>
</div>
