고정 이미지 및 콘텐츠가 화면 해상도 / 창 크기가 감소함에 따라 고정 된 사이드 바 중첩
-
02-01-2020 - |
문제
다음 구조가있는 페이지가 있습니다.
<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>
.
다음 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;
}
.
와이드 스크린에서 페이지를 보는 것은 내용이 좋습니다.그러나 창 크기를 줄이면 또는 저해상도 화면에서 사이트를 보면 고정 된 이미지와 그 아래의 텍스트는 조금만 척도하지만 사이드 바를 모호하게 시작합니다.또한 페이지가 스크롤되는 경우 일부 텍스트가 사이드 바용 공간을 만들기 위해 이동하지만 스크롤 할 때 아래의 텍스트가 겹치지 않습니다.
문제의 대략적인 예가 여기에서 볼 수 있습니다 : http://jsfiddle.net/4wqzp/
어떤 변화가 필요합니까?
편집 : 명확히하기 위해, 나는 일반적인 CSS / HTML 기반 수정을 희망하고 있었다.JavaScript는 내가 지금 까지이 사이트에서 실제로 그것을 사용하지 않았으므로 그것을 피하려고 노력하는 옵션입니다.
해결책
적응 형 디자인을 사용하여 두 가지 방법으로 사용)), 첫 번째는 "nofollow"> 부트 스트랩 프레임 워크를 사용하는 것입니다.쓰기 미디어 쿼리
제휴하지 않습니다 StackOverflow