2013-06-18 6 views
0

내 페이지에 문제가 있습니다.
Facebook 또는 Twitter에서 브라우저 창 크기를 조정할 때 페이지의 크기가 조정되지 않은 것처럼 보입니다. 내 페이지에서 어떻게 할 수 있습니까? 예를 들어이 코드가 있고 창 크기를 조정하면 상자는 항상 페이지 중간에 있으며 차단되지 않습니다.
내 코드로 페이지의 크기를 조정하려고하면 상자가 이동하고 치수가 변경되므로이 문제를 방지하고 싶습니다.창 크기를 조정할 때 페이지 크기 조정

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title</title> 
    </head> 
<body> 

<div style="width:100px; height:100px; position:absolute; top:50%; left:50%; margin-top: -50px; margin-left: -50px; background:#ccc;"></div> 

</body> 
</html> 

나는 무엇을 할 수 있습니까? 자바 스크립트를 사용해야합니까?

+0

무슨 뜻인지 스크린 샷을 주시겠습니까? – Tyanna

+0

죄송합니다 알베르토, 나는 당신이 원하는 것을 이해하지 못합니다. –

+0

@Alberto, [반응하는 웹 디자인] (http://en.wikipedia.org/wiki/Responsive_web_design "Responsive Web Design")에 대해 이야기하고 있습니까? – chrismborland

답변

1

최소한의 너비와 최소 높이를 주면 요소가 넘치게됩니다.

나는 당신의 의도 것으로 보인다 응답이없는 레이아웃을, 강제 : 여기에 코드의 바이올린있다 : 여기 당신 같은 포맷 http://jsfiddle.net/paperblankets/YTk6t/

그리고 코드 :

<html> 
<body> 
<span style="display:block;min-width:280px;"> 
<div style=" width:250px; 
    /* Random dimentions */ 
    height:200px; 
    /* Random dimentions */ 
    display:inline-block; 
    /*Allow Elements to sit next to each other */ 
    margin: 10px; 
    /* Slight padding to see the elements */ 
    background:#ccc; 
    /* Slight color to see the elements */ 
    overflow: visible; 
    /* Allow elements to overflow, and scroll bar to appear */"></div> 
</span> 
</body> 
</html> 

가 연결된 피들 (Fiddle)에있는 댓글을 살펴보고 어떤 규칙이 어떤 영향을 미치는지 분석합니다.

+0

내 코드로 페이지의 크기를 조정하려고하면 상자가 이동하고 치수가 변경됩니다. 이것을 피하십시오 @ 레비 – Alberto

+0

이렇게? http://jsfiddle.net/paperblankets/YTk6t/ – Levi

+0

빙고, 저는 이것을 내 페이지에 적용 할 것입니다. 감사합니다 – Alberto

0

JavaScript (onResize 참조) 또는 CSS 미디어 쿼리를 사용할 수 있습니다.

귀하의 질문이 모호하기 때문에 우리는 그 이상을 도울 수 없습니다.

+0

OP 질문이 모호하기 때문에, 나는 그것보다 훨씬 더 많은 도움을 줄 수 없습니다. –

+0

내 코드로 페이지의 크기를 조정하려고하면 상자가 이동하고 치수가 변경되므로이 기능을 사용하지 않습니다. @Mooseman – Alberto