URL 조각이 CSS 레이아웃에 어떤 영향을 줄 수 있습니까?

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

문제

이 3 개의 URL을 비교하십시오 (각 경우 상단 탐색 표시 줄을보십시오) :

  1. http://fast.kirkdesigns.co.uk/blog
  2. 위와 같이 URL 조각 #Navigation과 같이
  3. 위와 같이 URL 조각 #node-2655와 같이

유일한 차이점은 끝의 URL 조각입니다.

처음 두 페이지는 절대적으로 잘 표시됩니다 (최소한 Firefox에서). 문제가있는 세 번째는 세 번째입니다. 조각 #node-2655는 상단 Navbar를 화면 상단에서 밀어냅니다. 그런 다음 페이지 상단으로 뒤로 스크롤하면 Navbar가 반으로 자릅니다. 이는 페이지가 처음로드 될 때 Navbar가 초기 뷰포트를 벗어나게하는 URL 조각을 사용할 때 발생합니다.

그렇다면 URL 조각을 사용하면 이와 같이 CSS 레이아웃에 어떤 영향을 줄 수 있습니까?!

솔루션 : 아래 제안 된 바와 같이, 오버플로 제거 : Navbar를 고정 한 컨테이너 요소에 숨겨져있는 경우 문제가 해결되었습니다. 그래도 이유를 이해하고 싶습니다!

도움이 되었습니까?

해결책

제거하십시오 overflow:hidden ~에 #main CSS_75AFD7072EAP4096AAEBF60674218E31.CSS에서

다른 팁

오페라에서는 괜찮으므로 Firefox에서 렌더링 버그라고 말하고 싶습니다. 어쨌든 앵커는 당신이 말하는 것처럼 CS를 바꿀 것입니다 (jQuery 또는 무언가를 사용하지 않는 한).

나도이 문제가 있고 무슨 일이 일어나고 있는지 볼 수 있다고 생각합니다.

거대한 (5678 픽셀) 마진과 패딩이있는 "열"블록은 그 블록이 매우 높아집니다. Firefox 이외의 브라우저에서는 양수와 음수 값이 서로를 취소하지만 FF는 실제로 키가 큰 종류입니다.

FF는 또한 두 사람이 서로를 취소하는 것을 알고 있지만 5678px 패딩을보고 열 블록이 #wrapper 블록의 하단을 찌르고 있다고 결정합니다. 이것은 오버플로이며 오버플로가 #wrapper의 자동으로 설정되면 스크롤 바가 측면에있는 #wrapper의 실제 크기가 표시됩니다.

오버플로가 숨겨진 상태에서 FF는 스크롤 바를 제거하지만 여전히 #wrapper의 내용을 스크롤하여 조각이 가리키는 항목이 페이지 상단에 있도록하는 것 같습니다. 이것은 스크롤 가능한 블록의 조각 링크에 대한 정상적인 동작이지만 스크롤 바가 없으므로 컨텐츠를 다시 아래로 스크롤 할 수 없으므로 레이아웃이 조각에 의해 영향을받은 것처럼 보입니다.

요컨대,이 예에서는 FF가 보이지 않는 스크롤 바를 작동하고 있다고 생각합니다. 그것은 버그로 간주 될 수 있지만 아마도 올바른 행동 일 것입니다. URL 조각을 사용하여 흐르는 고정 크기의 블록 내부에서 내용을 위아래로 스크롤 할 수있는 것은 JavaScript가없는 경우에도 작동하는 이미지 "슬라이더"를 구현하는 데 효과적으로 사용할 수있는 기술입니다.

도움이되기를 바랍니다. 이것은 몇 년 동안 나를 당황하게 만들었고,이 설명은 갑자기 파란색을 쳤다. 이에 대한 현재의 해결 방법은 jQuery "Scroll"을 사용하여 플러그인을 사용하여 전체 페이지를 파편으로 스크롤하는 것입니다. #Wrapper의 내용이 내부적으로 스크롤되는 것을 방지하는 것으로 보입니다.

"디스플레이 : 숨겨진"오프 #wrapper를 사용할 수도 있지만 페이지는 0.5 마일 길이가됩니다.

나는 머리에 연결된 30 개 이상의 스타일 시트에서 이상한 상속이있을 수 있음을 지적 할 것이다. 어느 쪽도 할 수 없으며 아마도 렌더링 버그 일 것입니다 (아마도 관련이있을 수 있습니다. :target Dan이 제안한 스타일링). 나는 당신이 30 개가 넘는 스타일 시트를 가지고 있다면, 당신은 다른 일이 일어날 수있는 이상함을보기 시작할 것임을 지적 할 가치가 있다고 생각했습니다.

그 이유는 큰 패딩이 팽창 한 컬럼이 컨테이너를 확장했지만 확장은 숨겨져 있지만 오버플로; 그러나 조각을 사용하면 조각의 위치로 스크롤되어 그 이상의 내용을 효과적으로 자릅니다. JavaScript를 사용하고 ScrollTop을 0으로 설정하고 정상 위치로 다시 스크롤 할 수 있습니다.

기본적으로 브라우저가 잘 처리하지 않는 광범위한 가장자리 케이스.

죄송합니다 이것은 "답변"이 아닙니다. 여기서 다른 의견에 대한 응답입니다. 이 문제는 단지 연약한 것입니다. 분리하기가 매우 쉽습니다 (즉, 스타일 시트와는 아무런 관련이 없음), 원하는 렌더링을 달성 할 수있는 방법이 없기 때문에 적절한 "솔루션"이 없습니다.

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  margin: 1em auto;
  width: 40em;
}
#wrapper {
  overflow: hidden;
  position: relative;
}
#c1 {background-color: #aaf;}
#c2 {background-color: #ccf;}
.column {
  float: left;
  margin-bottom: -5678px;
  padding-bottom: 5678px;
  width: 50%;
}
#footer {
  background-color: #eee;
  padding: 1px;
  text-align: center;
}
p {margin: 1em;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="c1" class="column">
<p>This is some content in a short column. We would need some Javascript to change its height if we wanted a different background color for each column to stretch the full height of the respective columns...or we can use large padding together with an equal negative margin.</p>
<ul>
<li><a href="#p1">Jump to P1</a></li>
<li><a href="#p2">Jump to P2</a></li>
<li><a href="#p3">Jump to P3</a></li>
</ul>
</div>
<div id="c2" class="column">
<p id="p1">The desired effect is to have the height of the two columns appear the same. We use 'overflow:hidden' on the containing div (#wrapper) to wrap it around the floated columns.</p>
<p id="p2">These paragraphs have fragment identifiers. Problem comes in when clicking one of the links on the left. Instead of scrolling just the page, the browser scrolls the div with 'overflow:hidden' so the target is at the top. It does this even if the target is already visible.</p>
<p id="p3">Opera does not exhibit this behavior. This occurs in Chrome/Safari, Firefox, and IE. (Interestingly, IE also works as expected if we completely remove the DOCTYPE declaration.)</p>
</div>
</div>
<div id="footer">
<p>Footer stuff.</p>
<p>To see why 'overflow: hidden' (or any other piece of the CSS) is needed, just try disabling it.</p>
</div>
</div>
</body>
</html>

측면 노트와 마찬가지로 위의 기술은 일반적으로 유연한 폭 둘리 컬럼 레이아웃을 제공하는 데 사용됩니다. 고정 된 넓은 레이아웃이 훨씬 더 많은 댓글이되면서 요즘에는 덜 중요해질 것입니다. 브라우저는 웹 페이지를 확대하여 작은 텍스트를 볼 수 있으며 고정 된 width는 페이지의 타이포그래피를 훨씬 쉽게 제어 할 수 있습니다. 예를 들어 사용자가 선택한 글꼴 크기와 배율에 관계없이 폭에 이상 (EMS)을 설정하여 라인 당 이상 9 단어를 표시합니다.

그것이 대답처럼 들리지 않으면 죄송합니다. 그러나 기본적 으로이 오래된 모델을 버리고 고정형 열 (완전히 새로운 주제)으로 이동하는 것을 고려하는 것이 좋습니다.

오버플로 숨겨진 요소가 스크롤 된 위치로 본체를 스크롤하기 위해 일부 JavaScript로 이것을 해결할 수있었습니다.

setTimeout(() => {
    let intendedScroll = document.getElementById("fragmentfix").scrollTop;
    document.getElementById("fragmentfix").scrollTop = 0;
    window.scrollTo(0, intendedScroll);
}, 0)
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top