2열 페이지에서 CSS 또는 Javascript를 사용하여 왼쪽 div를 오른쪽 div와 동일한 높이로 늘리려면 어떻게 해야 합니까?
https://stackoverflow.com/questions/35699
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
저는 div 기반 레이아웃을 사용하여 2열 페이지를 만들려고 합니다(테이블은 사용하지 마세요!).문제는 왼쪽 div를 오른쪽 div의 높이에 맞게 늘릴 수 없다는 것입니다.내 오른쪽 div에는 일반적으로 많은 콘텐츠가 있습니다.
다음은 문제를 설명하기 위한 내 템플릿의 쌍을 이루는 예입니다.
<div style="float:left; width: 150px; border: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>
해결책
이 문제에는 jQuery를 사용하십시오.준비된 함수에서 이 함수를 호출하세요.
function setHeight(){
var height = $(document).height(); //optionally, subtract some from the height
$("#leftDiv").css("height", height + "px");
}
다른 팁
가장 간단한 대답은 현재 어떤 브라우저도 지원하지 않는 CSS의 다음 버전(3)에 있습니다.
지금은 자바스크립트로 높이를 계산하고 왼쪽에 설정하는 일만 남았습니다.
내비게이션이 그렇게 중요한 위치에 있다면 상단을 따라 실행하세요.
테두리를 컨테이너와 더 큰 내부로 이동하여 동일한 크기로 보이도록 시각적 트릭을 수행할 수도 있습니다.
이렇게 하면 똑같아 보이지만 그렇지 않습니다.
<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
<div style="float:left; width: 150px; border-top: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
...
</div>
<div style="clear:both;" ></div>
</div>
CSS로 할 수 있어요!사람들이 당신에게 다르게 말하도록 두지 마십시오.
가장 쉽고 통증이 없는 방법은 다음을 사용하는 것입니다. 가짜 기둥 방법.
하지만 해당 솔루션이 효과가 없다면 다음 내용을 읽어보세요. 이 기술.하지만 주의하세요. 이것은 한밤중에 식은땀을 흘리며 잠에서 깨게 만드는 일종의 CSS 해커입니다.
요점은 열 아래쪽에 많은 양의 패딩을 할당하고 동일한 크기의 음수 여백을 할당한다는 것입니다.그런 다음 다음이 포함된 컨테이너에 열을 놓습니다. overflow: hidden 세트.패딩/여백 값은 다소간 상자가 래퍼의 끝에 도달할 때까지 계속 확장되도록 허용하며(콘텐츠가 가장 많은 열에 의해 결정됨) 패딩에 의해 생성된 추가 공간은 오버플로로 잘립니다.별로 의미가 없군요. 나도 알아요...
<div id="wrapper">
<div id="col1">Content</div>
<div id="col2">Longer Content</div>
</div>
#wrapper {
overflow: hidden;
}
#col1, #col2 {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
제가 링크한 기사 전체를 꼭 읽어보세요. 주의사항과 기타 구현 문제가 많이 있습니다.꽤 좋은 기술은 아니지만 꽤 잘 작동합니다.
이것은 CSS가 할 수 없는 아주 합리적이고 간단한 일 중 하나입니다.Silviu가 제안한 Faux Columns는 해킹적이지만 기능적인 해결 방법입니다.언젠가 말할 방법이 있다면 참 좋을 것 같아요
div.foo {
height: $(div.blah.height);
}
이것 ~할 수 있다 배경색을 사용하여 CSS로 완료
<!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>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
margin:0 auto; /* remove if 100% width */
background:#FFF;
}
#header {
width: 100%;
height: 160px;
background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
background: #99C;
color: #000;
float: right;/* float left for right sidebar */
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
background: #99C;
color: inherit;
float: left;
width: 180px;
padding: 10px;
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}
/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#menu p {
font-size: 1em;
font-weight: bold;
padding: 5px 0 5px 5px;
}
#footer {
clear: both;
border-top: 1px solid #1e90ff;
border-bottom: 10px solid #1e90ff;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#footer p {
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">
<!--header and menu content goes here -->
<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc
vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>
<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>
@hoyhoy
디자이너가 이 작업을 HTML로 만들 수 있다면 그는 이 디자인을 가질 수 있습니다.진정한 웹디자인의 달인이라면 이것이 미디어의 한계라는 것을 깨닫게 될 것이다. 잡지광고에서는 영상이 불가능하기 때문이다.
2개의 열에 동일한 중요도를 부여하여 가중치를 시뮬레이션하려는 경우 동일한 가중치로 표시되도록 테두리를 변경하고 테두리 색상을 열의 글꼴 색상과 대조되도록 만듭니다.
그러나 물리적 요소를 동일한 높이로 만드는 경우 현재 시점에서는 테이블 구성이나 높이 설정을 통해서만 이를 수행할 수 있습니다.동일한 크기로 나타나는 것을 시뮬레이션하기 위해 동일한 크기일 필요는 없습니다.
생각해보면 컬럼에 하단 테두리를 넣어본 적이 없습니다.아마도 넘쳐서 잘려나가고 있을 것입니다.열 콘텐츠의 일부인 별도의 요소에서 아래쪽 테두리를 가져오고 싶을 수도 있습니다.
어쨌든, 나는 그것이 완벽한 마법의 총알 솔루션이 아니라는 것을 알고 있습니다.그냥 가지고 놀거나 단점을 해결해야 할 수도 있습니다.
Javascript 기반 솔루션도 있습니다.jQuery가 있는 경우 아래 플러그인을 사용할 수 있습니다.
<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
var maxHeight=0;
this.each(function(){
if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
$(this).height(maxHeight + "px");
if (this.offsetHeight>maxHeight) {
$(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
}
});
};
// usage
$(function() {
$('.column1, .column2, .column3').equalHeights();
});
</script>
나는 이것을 사용하여 ID가 "center"와 "right"인 2개의 열을 정렬합니다.
var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);
if (c.outerHeight() < r.outerHeight()) {
c.height(r.height () + rp - cp);
} else {
r.height(c.height () + cp - rp);
}
도움이 되길 바랍니다.
성장하려면 왼쪽 메뉴 div 오른쪽 콘텐츠 div와 높이가 같습니다.
<!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>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var height = $(document).height(); //optionally, subtract some from the height
$("#menu").css("height", (height) + "px");
$("#content").css("height", (height) + "px");
});
</script>
<style type="text/css">
<!--
html, body {
font-family: Arial;
font-size: 12px;
}
#header {
background-color: #F9C;
height: 200px;
width: 100%;
float: left;
position: relative;
}
#menu {
background-color: #6CF;
float: left;
min-height: 100%;
height: auto;
width: 10%;
position: relative;
}
#content {
background-color: #6f6;
float: right;
height: auto;
width: 90%;
position: relative;
}
#footer {
background-color: #996;
float: left;
height: 100px;
width: 100%;
position: relative;
}
-->
</style>
</head>
<body>
<div id="header">
i am a header
</div>
<div id="menu">
i am a menu
</div>
<div id="content">
I am an example of how to do layout with css rules and divs.
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
</div>
<div id="footer">
footer
</div>
</body>
</html>
