div를 수직으로 스쿼시하여 화면에 100 % 이하로 유지하는 방법

이 코드는 여기에 있습니다. 하단에 작은 화살표가있는 http://jsfiddle.net/nUwgX/입니다. 창의 크기를 조정할 때 화면 아래쪽에서 화살표를 약 15 % 정도 유지하는 것이지만, 어떻게 할 것인지 잘 모르겠습니다. 어떤 도움을 주시면 감사하겠습니다.div를 수직으로 스쿼시하여 화면에 100 % 이하로 유지하는 방법

HTML :

<div class = "container"> 

    <div class = "top-wrapper"> 
     <a id = "name" href = "#">Bigfoot Games</a> 
    </div> 
    <div class = "bottom-wrapper"> 
     <p>Content</p> 
    </div> 

</div>

CSS :

.container { 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    position: relative; 
    padding: 0; 
    text-align: center; 
} 

.top-wrapper { 
    position: relative; 
    background: #0f0f0f; 
    height: auto; 
    height: 100%; 
    max-height: 900px; 
    width: 100%; 
    margin: 0 auto; 
    padding: 0; 
    display: table;    
} 

.top-wrapper:after { 
    top: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    border-color: rgba(15, 15, 15, 0); 
    border-top-color: #0f0f0f; 
    border-width: 30px; 
    margin-left: -30px; 
} 

#name { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    padding: 20px; 
    color: white; 
    font-size: 80px; 
    text-decoration: none; 
    margin: auto 0; 
} 

.bottom-wrapper { 
    background: white; 
    margin: 0 auto; 
    padding: 20px; 
}

편집 : 좋아, 그래서 약 15 % 이상에있는 화살표를 원했다는 것을 말하는 것은 무슨 의미가 아니다! 하아! 내 말은, .top-wrapper를 100 %로하여 전체 창을 덮고 싶을 때 .bottom-wrapper를보기 위해서 스크롤을 내려야한다는 것입니다. 그러나 화면의 크기를 조정하면 (1920 x 1080 해상도) 화살표가 보이지 않는 곳에 숨어있다. 나는 해상도에 관계없이 화살표가 보이고 패딩/거리의 관점에서 1920 x 1080 해상도로 보인다.

출처

2013-12-18 Adam Short

'.container'를 화면 크기의 100 %로 설정 하시겠습니까? 그렇다면'.bottom-wrapper'가 화면 하단에 보이겠습니까? 명확히하십시오. 고맙습니다. –

기본적으로'.top-wrapper'는'85 %'high가 아니고'100 %'right가되고 싶습니다. – myajouri

수정 된 질문 –

.top-wrapper의 CSS를 85 %까지만 변경하십시오. 하단의 "화살표"가 차지하는 비율이 15 %입니다.

.top-wrapper { 
    ... 
    height: 85%; 
    ... 
}

는 jsfiddle를 참조하십시오

http://jsfiddle.net/nUwgX/1/

출처

2013-12-18 20:51:33 Don

감사합니다, 내가 가고있는 것을 얻는 것처럼 보입니다! –

내가 jsfiddle에 그냥 변경하여 .top-wrapper height

85%에 변경

와 화면 크기를 조정할 때 그것을 유지합니다. 그것이 당신이 찾고있는 것이 아니라면, 질문에 대해 자세히 설명해주십시오.

행운을 빌어 요!

출처

2013-12-18 20:49:20

당신이 바닥 고정 된 위치에서 수익-래퍼를 유지하려면 ...

가와 .bottom-wrapper 클래스를 교체

아래

.bottom-wrapper { 
    position:fixed; 
    bottom: 0px; 
    height: 15%; 
    width: 100%; 
    background-color: white; 
    margin: 0 auto; 
} 
.bottom-wrapper p{ 
    padding-top: 20px; 
}

다음으로 변경하십시오. .top-wrapper:after ~ .bottom-wrapper:before

출처

2013-12-18 20:56:26 KTU

div를 수직으로 스쿼시하여 화면에 100 % 이하로 유지하는 방법

답변

관련 문제