Tự động chỉnh chiều cao với tràn và cuộn khi cần

Tôi đang cố tạo một trang web không có cuộn dọc cho một trang, nhưng tôi cần một trong các DIV mà tôi phải mở rộng theo chiều dọc xuống cuối trang (tối đa là), và rằng khi nó có nội dung không phù hợp, div sẽ tạo ra một cuộn dọc.Tự động chỉnh chiều cao với tràn và cuộn khi cần

tôi đã có css cho bên trong của div được tìm ra trong this fiddle, tạo cuộn khi cần. tôi cũng đã tìm ra how to make div container phát triển để chiếm chính xác không gian dọc mà nó có trong trang. tôi không thể làm cho họ làm việc cùng nhau!

xin lưu ý rằng trong jsfiddle bạn sẽ không thể xem nội dung của toàn bộ trang web và theo nghĩa đó, những gì bạn nhận được cho fiddle thứ 2 không thực sự hiển thị những gì đang được thực hiện, nhưng nó hoạt động như tôi dự định.

chỉ một lưu ý khác: vì chúng là các câu đố khác nhau, id # container div trong fiddle thứ nhất là id id # dcontent div của ví dụ thứ 2.

có một điều khác: đối với loại nội dung, div này sẽ cuộn theo chiều dọc, nhưng đối với loại nội dung khác, tôi muốn cuộn theo chiều ngang, vì nó sẽ có một sản phẩm "trượt" hiển thị các phần tử theo chiều ngang bên trong DIV.

thời hãy nhìn vào bức ảnh này vì nó có thể được dễ dàng hơn để hiểu những gì tôi đang cố gắng để nói: PICTURE

tôi đã cố gắng tìm kiếm các câu hỏi khác liên quan đến các chủ đề này, nhưng không ai có vẻ để trang trải tất cả các khía cạnh tôi đang cố giải quyết ...: S

nếu có điều gì khác mà tôi có thể cung cấp để trợ giúp bạn/tôi :) hãy tìm hiểu, hãy cho tôi biết!

cảm ơn!

EDIT1: fixed lỗi chính tả

EDIT2: thêm ảnh cho lời giải thích

Nguồn

2012-04-14 Joum

Vâng, sau khi nghiên cứu dài, tôi tìm thấy một workaround mà những gì tôi cần: http://jsfiddle.net/CqB3d/25/

CSS:

body{ 
margin: 0; 
padding: 0; 
border: 0; 
overflow: hidden; 
height: 100%; 
max-height: 100%; 
} 

#caixa{ 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#framecontentTop, #framecontentBottom{ 
position: absolute; 
top: 0; 
width: 800px; 
height: 100px; /*Height of top frame div*/ 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background-color: navy; 
color: white; 
} 

#framecontentBottom{ 
top: auto; 
bottom: 0; 
height: 110px; /*Height of bottom frame div*/ 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background-color: navy; 
color: white; 
} 

#maincontent{ 
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/ 
margin-left:auto; 
    margin-right: auto; 
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/ 
overflow: auto; 
background: #fff; 
    width: 800px; 
} 

.innertube{ 
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ 
} 

* html body{ /*IE6 hack*/ 
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/ 
} 

* html #maincontent{ /*IE6 hack*/ 
height: 100%; 
width: 800px; 
}

HTML:

<div id="framecontentBottom"> 
<div class="innertube"> 

<h3>Sample text here</h3> 

</div> 
</div> 


<div id="maincontent"> 
<div class="innertube"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text... 
</div> 
</div> 
</div>

có thể không hoạt động với tính năng nằm ngang, nhưng, đó là công việc đang diễn ra!

tôi về cơ bản bỏ "khởi đầu" set-top box bên trong-hộp-bên trong hộp mô hình và sử dụng định vị cố định với chiều cao và tràn tính năng động.

Hy vọng điều này có thể giúp đỡ bất cứ ai tìm thấy câu hỏi sau!

EDIT: Đây là câu trả lời chính thức.

Nguồn

2012-04-15 16:55:54 Joum

Hãy thử điều này:
CSS:

#content { 
    margin: 0 auto; 
    border: 1px solid red; 
    width:800px; 
    position:absolute; 
    bottom:0px; 
    top:0px; 
    overflow:auto 
}

HTML:

<body> 
<div id="content"> 
...content goes here... 
</div> 
<body>

Nếu bạn không như định vị tuyệt đối trong trường hợp này, chỉ có thể chơi wi th làm cha mẹ và con cái div này, cả hai với position:relative.

EDIT: Dưới đây nên làm việc (tôi chỉ đặt inline css cho thời điểm này):

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden"> 
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto"> 
...content goes here... 
</div> 
</div>

Nguồn

2012-04-15 02:52:31 preahkumpii

hoạt động tốt với * bên trong * của div với nội dung và nó thay đổi kích thước thành ocuppy không gian dọc có sẵn, nhưng tôi không * phát triển * bên trong vùng chứa khi tôi cần nó ... btw, i đang cố gắng chỉnh sửa của bạn .... điều là div mẹ trong ví dụ mã thứ hai của bạn là bên trong một vùng chứa khác trong mã của tôi ... kiểm tra hình ở trên để có mô tả rõ ràng hơn ... bất kỳ ý tưởng nào khác? – Joum

yup ... không hoạt động: S ở đây là fiddle với kết quả kiểm tra của bạn: http://jsfiddle.net/CqB3d/ đường viền màu đỏ div nên ở trạng thái tràn giữa các thanh màu đen và hiển thị cuộn dọc. và nếu tình cờ độ phân giải khác nhau, chỉ có div có đường viền màu đỏ nên * tăng * để thay đổi kích thước ... tôi hoàn toàn bị mất ở đây: S dunno nếu chiều cao của nó: cài đặt tự động khiến hành vi này theo cách này hoặc nếu nó có liên quan đến nội dung của div ... – Joum

-5

tôi nghĩ rằng nó là khá dễ dàng. chỉ cần sử dụng css này

.content { 
    width: 100%; 
    height:(what u wanna give); 
    float: left; 
    position: fixed; 
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: none; 
}

sau này chỉ cung cấp cho lớp này để ur div chỉ thích -

<div class="content">your stuff goes in...</div>

Nguồn

2012-05-02 11:22:07

-1

Đây là những gì tôi cố gắng làm cho đến nay. Tôi đoán đây là loại những gì bạn đang cố gắng để kéo ra. Điều duy nhất là tôi vẫn không thể quản lý để chỉ định chiều cao thích hợp cho container DIV.

->JSFIDDLE

Nguồn

2012-05-05 03:54:06

không tìm thấy liên kết jsfiddle. Nên đăng mã trong câu trả lời của bạn không chỉ liên kết –

nhanh trả lời với điểm chính

Khá nhiều câu trả lời tương tự như các câu trả lời lựa chọn tốt nhất từ @Joum, nhằm đẩy mạnh tốc quest của bạn cố gắng để đạt được các câu trả lời cho đăng tải câu hỏi và tiết kiệm thời gian từ việc giải mã whats going on trong cú pháp -

trả lời

Đặt thuộc tính vị trí thành cố định, đặt thuộc tính trên cùng và dưới cùng theo ý thích của bạn cho phần tử hoặc div mà bạn muốn có kích thước "tự động" so với phần tử mẹ và sau đó đặt tràn để ẩn.

.YourClass && || #YourId{ 
    position:fixed; 
    top:10px; 
    bottom:10px; 
    width:100%; //Do not forget width 
    overflow-y:auto; 
}

Wallah! Đây là tất cả những gì bạn cần cho phần tử đặc biệt của mình mà bạn muốn có chiều cao động theo kích thước màn hình và nội dung động đến trong khi duy trì cơ hội cuộn.

Nguồn

2016-05-09 18:54:30 MattOlivos

Đây là một giải pháp ngang với việc sử dụng FlexBox và không có absolute vị pesky.

body { 
 
    height: 100vh; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
#left, 
 
#right { 
 
    flex-grow: 1; 
 
} 
 

 
#left { 
 
    background-color: lightgrey; 
 
    flex-basis: 33%; 
 
    flex-shrink: 0; 
 
} 
 

 
#right { 
 
    background-color: aliceblue; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-basis: 66%; 
 
    overflow: scroll; /* other browsers */ 
 
    overflow: overlay; /* Chrome */ 
 
} 
 

 
.item { 
 
    width: 150px; 
 
    background-color: darkseagreen; 
 
    flex-shrink: 0; 
 
    margin-left: 10px; 
 
}

<html> 
 

 
<body> 
 
    <section id="left"></section> 
 
    <section id="right"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </section> 
 
</body> 
 

 
</html>

Nguồn

2017-07-31 08:27:53 TranslucentCloud

Tôi ngạc nhiên không ai đề cập calc() được nêu ra.

Tôi đã không thể tạo ra trường hợp cụ thể của bạn từ các câu đố của bạn, nhưng tôi hiểu vấn đề của bạn: bạn muốn một vùng chứa height: 100% vẫn có thể sử dụng overflow-y: auto.

Thao tác này không hoạt động ra khỏi hộp vì overflow yêu cầu một số hạn chế về kích thước được mã hóa cứng để biết khi nào cần bắt đầu xử lý tràn. Vì vậy, nếu bạn đã đi với height: 100px, nó sẽ hoạt động như mong đợi.

Tin vui là that calc() can help, nhưng không đơn giản như height: 100%.

calc() phép bạn kết hợp các đơn vị tùy ý các biện pháp.

Vì vậy, đối với những tình huống mà bạn mô tả trong hình bạn bao gồm:

Vì tất cả những yếu tố trên và dưới div màu hồng là của một chiều cao nổi tiếng (giả sử, 200px trong tổng chiều cao), bạn có thể sử dụng calc để xác định chiều cao của pinky ole:

height: calc(100vh - 200px);

hay, 'chiều cao là 100% 200px xem chiều cao trừ đi.'

Sau đó, overflow-y: auto sẽ hoạt động như một nét duyên dáng.

Nguồn

2017-08-18 22:08:29 Brandon

Tự động chỉnh chiều cao với tràn và cuộn khi cần

Trả lời

Các vấn đề liên quan