요소 위치 지정/크기 조정을위한 CSS/javascript

-1

다음과 같이하는 방법에 대한 몇 가지 일반적인 지침을 따르고 있습니다.요소 위치 지정/크기 조정을위한 CSS/javascript

웹 페이지의 일부 요소 (div)를 절대 위치로 배치하려고합니다. 요소가 상대적으로 위치합니다.

정상적인 문서 흐름에서 위/왼쪽 요소를 포함해야한다는 아이디어가 있다면, 너비가 <body>까지 RHS까지 채우고, 작은 여백은 적어 지도록 높이를 설정해야합니다. 그것은 디스플레이 윈도우의 나머지 부분을 채우고, 바닥 글 (div도 포함)이 차지하는 공간을 줄입니다.

그런 다음, 하위 요소를 배치 할 수 있습니다. 문제는 포함하는 요소의 너비/높이를 설정하는 것입니다.

나는 position 속성과 javascript의 다양한 조합을 사용하여 성공적으로 onload()를 실행 해 보았습니다. 분명히 올바른 접근 방식을 취하고 있지 않습니다.

내가 실제로하는 것은 취해야 할 접근법에 대해 이것을 수행하는 방법을 알고있는 누군가의 조언입니다. 결론은 브라우저 윈도우의 제약과 바닥 글 요소가 차지하는 공간을 고려할 때 가능한 한 크게 확장하기 위해 요소를 포함해야한다는 것입니다.

.... 자세한 정보 다음 의견.

기본적으로 TV/라디오 일정과 달리 일정을 표시하려고합니다. 나는. 이벤트 클래스 별 라인, 각 라인 내에서 상자에 표시된 많은 개별 이벤트 및 타임 라인에서 실제 이벤트의 시작/끝으로 스케일 된 '상자 너비/위치'가 있습니다.

나는 단순히 HTML 테이블과 많은 열을 사용하여 에 필요한 입도를 얻은 다음 colspan을 사용하여 너비를 다양하게하는 것을 보았습니다. 그러나 나는 요소의 절대적인 위치와 그것을하려고하려고 줄 알았는데. 첫 번째 문제는 contains 요소가 position : absolute를 사용하면 문서 흐름에서 각 요소를 빼내기 때문에이 요소가 얼마나 큰지 알지 못한다는 것입니다. 따라서 포함 요소에 overflow-x : auto가있는 경우에도 스크롤 막대가 표시되지 않습니다.

나는 CSS/javascript로 아무데도 빨리 가지 않고있다. (사실, 아무데도 없지만 실제로는 아주 빠르다.) UI를 제어하는 유일한 방법은 자바 애플릿을 작성하는 것이다. 그것 모두를 포함 할까?

내 질문 : 개념적으로, 이것에 대해 좋은 방법은 무엇이겠습니까?

출처

2016-09-08 nmw01223

안녕과 함께, 당신은 당신의 작업 코드를 공유 할 필요가 자바 스크립트 CSS는 더 나은 아이디어를 제공합니다 너의 위치의 ation. –

요소를 절대적으로 배치하면 포함하는 요소의 높이를 정의하는 일반적인 흐름에서 요소를 가져옵니다. 컨테이너의 높이를 올바르게 정의하려면 몇 가지 해결 방법을 찾아야합니다. –

코드를 제공 할 수 없으며 아직 작업에 근접한 것도 없습니다. 개념적으로 나는 그것에 대해 어떻게 할 지 모르지만, 이것이 주된 문제입니다. 그렇습니다. 나는 '흐름에서 벗어남'문제를 이해합니다. 이것은 또한 문제의 일부입니다. 나는 위의 몇 가지 추가 의견을 추가하고 있습니다. – nmw01223

컨테이너가 절대 요소를 포함하려면 높이를 고정 높이로 설정하거나 자바 스크립트를 사용하여 동적으로 높이를 설정해야합니다.

참조 예 https://codepen.io/jacobgoh101/pen/kkWJaL

HTML

<div class="container"> 
    <img src="https://s21.postimg.org/c1m6ky7dz/kingston_creative_market_cover_small_f.jpg"> 
</div>

.container { 
    position: relative; 
    width: 90%; 
    border: 1px solid #000; 
} 

.container > img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

jQuery를

window.onload = function() { 
    var imgHeight = $('.container img').height(); 
    var targetHeight = imgHeight * 1.2; 
    $('.container').height(targetHeight); 
};

출처

2016-09-08 08:46:12

요소 위치 지정/크기 조정을위한 CSS/javascript

답변

관련 문제