Imagem fixa e o conteúdo se sobrepõe fixo barra lateral como a resolução da tela/diminui o tamanho da janela
-
02-01-2020 - |
Pergunta
Eu tenho uma página com a seguinte estrutura:
<body>
<div id="page">
<div id="header-container">
<header>
</header>
</div>
<div id="main-container">
<div id="main" class="site-main">
<div id="sidebar-container">
<div id="sidebar">
</div>
</div>
<div id="content-container">
<div id="main-banner-container">
<div id="main-banner-holder">
<img id="main-banner" src="http://dummyimage.com/900x300/000/fff" />
</div>
</div>
<div id="content" class="content" role="main">
</div>
</div>
</div>
<div id="footer-container">
<footer>
<div id="footer-images">
</div>
</footer>
</div>
</div>
</div>
</body>
E formatado com o seguinte CSS:
body {
margin: 0 auto;
width: 70%;
background-color: rgb(0,114,187);
font-family: verdana;
}
#header-container {
padding-bottom: 15px;
padding-top: 20px;
padding-left: 35px;
padding-right: 35px;
height: 190px;
}
header {
position: fixed;
width: 66%;
padding-top: 30px;
top: 0px;
}
#sidebar-container {
height:500px;
width:320px;
float:right;
}
#sidebar {
position: fixed;
color: rgb(211,34,52);
padding: 10px;
right: 16.5%;
top:226px;
}
#content-container {
width: 72%;
}
#main-banner-container {
max-width: 900px;
}
Visualizar a página em um formato widescreen mostra o conteúdo de multa.No entanto, como eu reduzir o tamanho da janela, ou se eu ver o site em uma resolução mais baixa da tela, a imagem fixa e o texto abaixo, ele começa a obscurecer o lateral, mesmo que ele escala um pouco.Além disso, quando a página é de rolagem, mesmo que alguns de texto, mova o cursor para fazer espaço para o lateral, o texto abaixo, que se sobrepõe ao rolada.
Um exemplo grosseiro do problema pode ser visto aqui: http://jsfiddle.net/4WQzP/
Que transformações eu preciso fazer?
EDITAR:Para esclarecer, eu estava esperando uma planície de CSS/HTML baseado correcção.O Javascript é uma opção, apesar de eu tentar evitá-lo, pois eu realmente não utilizados neste site até agora.
Solução
para usar um design adaptável usado de duas maneiras)), a primeira é usar o bootstrap quadro, a segunda é escrita consultas de mídia