빈 div의 높이가 100 % 인 경우

예 100 % div와 관련하여 수십 개의 질문을 보았습니다. 하지만 여전히 구현할 수 없습니다. 오른쪽 div에 음수 여백을 사용하고 있습니다.빈 div의 높이가 100 % 인 경우

테스트 버전은 여기에 있습니다 : http://bazarak.af/t.php

내가 나선 클래스의 높이 키를 누른 다음 금속 나선형 등장하지 않습니다를 제거합니다. 누군가 제발 나를 도와주세요. 나는 그 나선이 내용 옆에 나타나길 원한다.

자바 스크립트를 사용할 수 있지만 모든 사용자가 자바 스크립트를 사용할 수있는 것은 아닙니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
<title>TEST</title> 

<style type="text/css"> 
.wrapper{ 
margin: 0px auto; 
background-color: white; 
border: 1px solid #CCC; 
width: 1030px; 
} 

body{ 
background-color: #f3f0e6; 
height: 100%; 
margin-top: 30px; 
} 

.content{ 
float: left; 
width: 960px; 
padding: 15px; 
} 

.spiral { 
float: right; 
margin-right: -32px; 

width:63px; 
height: 500px; 

background-image:url(images/home/spiral.jpeg); 
background-repeat:repeat-y; 
background-position:top left; 
} 

.clear{clear: both;} 
</style> 


</head> 
<body> 

    <div class="wrapper"> 
     <div class="spiral"></div><!-- END SPIRAL --> 
     <div class="content"> 

     [HEADER]</br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br></br> [FOOTER] 

     </div><!-- END CONTENT --> 
     <div class="clear"/> 
    </div><!-- END WRAPPER --> 



</body> 
</html>

출처

2012-05-08 Anonymous

자바가 아니라 자바 스크립트;) 매우 다른 두 개의 언어. – jeremyharris

당신이 옳습니다. 죄송합니다. :) –

가 여기에 대답이 바이올린을 참조하십시오 내 의견에 따라.

jsfiddle.net/kxwgJ/1

단순히 나선 컨테이너에서 "부동"를 제거하고 단지 절대적 위치. 나선형은 디자인 일 뿐이므로 상위에 상대적으로 배치되므로 절대 위치 지정이 더 적합 해 보이며 수레 문제를 피할 수 있습니다.

출처

2012-05-08 19:01:17 jmbertucci

답변 해 주셔서 감사합니다. 하지만 다음 번에 누군가 다른 서버에 elses 이미지를 업로드하지 마십시오. 이 작업을 수행 할 수있는 권한이 없습니다. 하지만 내 잘못이야. 나는 저작권 노트를 쓰지 않았다. 그러나 솔루션은 멋졌고 현재 사이트는 훌륭하게 작동합니다. :) –

사진에 대해 찍은 포인트. 그 생각은 실제로 내 마음을 결코 넘어서지 못했다. 나는 미래에 그것을 더 염두에 두어야 할 것이다. – jmbertucci

Jeesus, 이미지 핸드백 - 멋지지 않은 user1012032 –

당신은 display: table-cell;을 찾고 있습니다 : 메신저 문제가 이렇게 여기에서 해결 테스트 페이지를 제거하는 것 때문에

다른 사람의 코드입니다. http://jsfiddle.net/RZBAg/이

(.. 나선형 나는 또한 나선형 DIV의 크기를 설명하기 위해 빨간색 배경을 추가 내용 다음에 오는 때문에 HTML 마크 업, 조금 변경)

출처

2012-05-08 15:28:05 jeremyharris

흥미롭게도 나는 똑같은 일을했지만 "float"을 "position : absolute;"로 변경했다. http://jsfiddle.net/kxwgJ/1/ 필자는 jsFiddle에서보기 쉽게 200px로 노트북을 축소했다. =) – jmbertucci

확장하려면 높이가 필요하고 jsfiddle의 높이는 부모에 정의되어 있기 때문에 jsfiddle 외부에서 작동하는지 확인하십시오. – jeremyharris

@jeremyharris, 시간 내 주셔서 감사합니다. 그러나 나선형은 래퍼 회색 테두리 안에서 끝나 버렸습니다. @ jmbertucci 답변을 수락 할 수 있도록 답장을 보내주십시오. 그것은 그러한 아름다움과 함께 작동합니다. 둘 다 감사합니다. 좋은 하루 되세요. –

빈 div의 높이가 100 % 인 경우

답변

관련 문제