일부 텍스트가 포함 된 div가 있습니다. 이 div는 position:fixed 이었지만 몇 가지 이유 때문에 position:absolute이 필요합니다.위치를 고정에서 절대로 변경하면 div 요소의 크기가 변경되는 이유는 무엇입니까?
그러나 고정 크기에서 고정 크기로 변경하면 크기가 변경됩니다 (fixed 동안의 "자동 크기 조정"표시가 좋았고 보존되어야 함). http://jsfiddle.net/ThiefMaster/yBRa9/3/
내가 가장 낮은 가능한 크기로 축소 요소없이 position:absolute을 유지하는 방법을 찾고 있어요 :
여기에 최소한의 예입니다.
JavaScript를 사용하면 easy to achieve이지만 추가 JS없이 수행 할 수 있다면 좋을 것입니다.
Here Check it. 설정해야합니다, (I 제대로 질문을 이해했다면, 물론) 당신이 을 원하는 것을 할 것 같다.
아쉽게도 팝업이 절대적으로 배치 될 때 작동하지 않습니다. 이것이 OP가 필요로하는 것입니다. –
@Paul, 'position : absolute'인 경우에도 스팬은 같은 방식으로 동작합니다. – Starx
작동하는 것 같습니다. 적어도 내 테스트 케이스는. 불행히도 내 애플 리케이션에서 더 복잡한 대화 상자 중 하나는 여전히 부러지지 만 잘하면 내가 고정거야 - 만약 내가 JS 너비를 설정해야 할거야 :/ – ThiefMaster
절대 위치 지정이있는 요소는 부모의 너비를 상속받지 않습니다. 당신은 내가 inline-block와 범위를 사용 width 또는 min-width
이 CSS는 다양한 대화 상자에 사용됩니다. 모든 너비를 설정하는 것은 꽤 많은 작업이 될 것입니다. 그 내용에 따라 동적 크기 조정이 필요합니다. – ThiefMaster
개발자가 작업해야합니까? 천국 forfend * 미소 *. 옛날에 사용하던 한 가지 트릭 ... 블록 상단에 이미지를 넣고 300px ... 높이 1px, 투명 GIF ... 최소 너비를 강제로 지정합니다. 합리적이지만, 거기에있는 어떤 것이 그보다 더 크다면, 그것을 수용하기 위해 확장 될 수 있습니다. IE6 호환성에 신경 쓰지 않는다면 min-width를 사용할 수 있습니다. –
이런 이유로 나는'min-width'를 사용할 수 있습니다. 그 픽스가 있었고 작은 대화 상자에서도 잘 작동했습니다. 그러나 더 큰 것들은 여전히 파괴되어 있습니다 - 나는 작은 대화 상자가보기 흉하게 보일 정도로 높은 '최소 너비'를 설정하고 싶지 않습니다. – ThiefMaster
나는 똑같은 문제에 직면했다. 나는 Teneff의 대답을 읽고 width : 100 %로 고정시켰다. 내가 새로운 것이기 때문에 이것이 최선의 방법 일지 확신하지 못한다. 다음은 그 예이다 :
HTML :
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slide</h2>
<p>Sliding time</p>
</div>
<img src="http://images.clipartpanda.com/spring-clip-art-spring-clip-art.jpg" alt="an image">
</div>
</div>
CSS :
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
.slide-copy {
position: absolute;
bottom: 0px;
left:0;
padding: 20px;
background: #7f7f7f;
background: rgba(0,0,0,0.5);
}
것은 당신이 내부의 내용에 따라, 분할 크기를 조정 찾고 계십니까? – Starx
div를 'position : fixed'와 같은 방식으로 크기를 조정하고 싶습니다. – ThiefMaster