고정 이미지 및 콘텐츠가 화면 해상도 / 창 크기가 감소함에 따라 고정 된 사이드 바 중첩

StackOverflow https://stackoverflow.com//questions/25081585

문제

다음 구조가있는 페이지가 있습니다. 

<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"> 부트 스트랩 프레임 워크를 사용하는 것입니다.쓰기 미디어 쿼리

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top