116

Tôi có yếu tố sau:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div> 

Nó hiển thị hộp thoại phương thức một cái gì đó như thế này, về cơ bản, nó đặt thanh cuộn xung quanh toàn bộ hộp thoại phương thức chứ không phải thân thể phương thức có chứa nội dung tôi đang cố gắng hiển thị.

Hình ảnh trông giống như thế này:

nhập mô tả hình ảnh ở đây

Làm thế nào để tôi có được thanh cuộn xung quanh chỉ có phương thức cơ thể? Tôi đã cố gắng gán style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"cho modal-bodynhưng nó không hoạt động.

|
219

Bạn phải đặt heightcái .modal-bodytrong và đưa ra overflow-y: auto. Cũng đặt lại .modal-dialoggiá trị tràn sang initial.

Xem mẫu làm việc:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}
|
  • 1

    Cám ơn vì cái này. Nó hoạt động rất tốt. Có thể là một cái gì đó không rõ ràng với tôi trong css. Tôi đã thử gán chiều cao tối đa cho cơ thể phương thức: 65% không hoạt động. Giải pháp bạn cung cấp chỉ hoạt động nếu tôi gán chiều cao cố định cho cơ thể phương thức. Có cách nào để nói hộp thoại modal chiếm 85% cửa sổ và thân modal nên chiếm 90% hộp thoại modal không? Nhưng một lần nữa giải pháp bạn cung cấp làm việc cho tôi, bây giờ. Cảm ơn!

    – Hồ Huy Hoàng 17:47:03 16/09/2014
  • 1

    @SubodhNijsure Xin lỗi vì phản hồi muộn. Bạn không thể đặt chiều cao theo% vì điều đó có nghĩa là% cha mẹ của nó, trong trường hợp này là cha mẹ có nội dung .modal và chiều cao của nó phụ thuộc vào con cái của nó. Đó là lý do tại sao nó sẽ không hoạt động trừ khi bạn đặt một trong số chúng. Hoặc bạn đặt chiều cao nội dung .modal hoặc đặt chiều cao cơ thể .modal. Nếu bạn đặt chiều cao của nội dung .modal thì bạn sẽ có thể đặt chiều cao của .modal-body theo% và nó sẽ là% của cha mẹ của nó, vì vậy nếu bạn đặt nó dưới 100% thì sẽ có khoảng trống ở dưới cùng, vì bạn không lấp đầy tất cả chiều cao của nội dung .modal.

    – Dương Thục Anh 19:57:38 18/08/2015
  • 1

    Hãy nhớ rằng initialtừ khóa của CSS không hoạt động cho Internet Explorer, mặc dù nó hoạt động với Edge.

    – Trịnh Kim Đoan 15:15:59 01/08/2016
  • 1

    chỉ là một con trỏ nhỏ: thay vì "chiều cao 250px" có thể trông xấu xí trên một số điện thoại chỉ có chiều cao 230px hoặc thấp hơn với thanh điều hướng theo chiều ngang: chỉ sử dụng max-height: 80vh;80% tổng chiều cao của khung nhìn và chỉ cho chiều cao tối đa, chứ không phải nếu nó là một cửa sổ bật lên nhỏ

    – Hồ Minh Nhân 00:33:35 02/11/2016
  • 1

    hoạt động tốt, nhưng sau khi đóng chế độ, các liên kết trên cửa sổ 'cha mẹ' không thể nhấp được nữa ... đã giải quyết bằng mã sau: .modal .modal-body {max-height: 420px; tràn-y: tự động; }

    – Trịnh Duy Minh 09:38:45 23/12/2016
93

Nếu bạn chỉ hỗ trợ IE 9 trở lên, bạn có thể sử dụng CSS này sẽ mở rộng quy mô theo kích thước của cửa sổ. Bạn có thể cần phải điều chỉnh "200px", tùy thuộc vào chiều cao của tiêu đề hoặc chân trang của bạn.

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
|
24

Vấn đề được giải quyết với giải pháp kết hợp @carlos calla và @jonathan marston.

    /* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
|
10

Tùy chọn : Nếu bạn không muốn phương thức vượt quá chiều cao cửa sổ và sử dụng thanh cuộn trong phần thân .modal, bạn có thể sử dụng giải pháp đáp ứng này. Xem bản demo hoạt động tại đây: http://codepen.io/dimbslmh/full/mKfCc/

function setModalMaxHeight(element) {
  this.$element     = $(element);
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() > 767 ? 60 : 20;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});
|
10

Thêm vào câu trả lời tuyệt vời của Carlos Calla .

Chiều cao của thân máy .modal phải được đặt, NHƯNG bạn có thể sử dụng truy vấn phương tiện để đảm bảo phù hợp với kích thước màn hình.

.modal-body{
    height: 250px;
    overflow-y: auto;
}

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}
|
  • 1

    Có một giả định rằng chiều cao sẽ là 400px hoặc cao hơn trên thiết bị di động là bị lỗi. Sử dụng chiều rộng để xác định chiều cao hoàn toàn không phải là một giải pháp khả thi. Có quá nhiều trường hợp sử dụng sẽ khiến điều này bị phá vỡ.

    – Đỗ Khả Ngân 03:19:24 05/08/2015
  • 1

    @Strawberry anh ấy thực sự đã sử dụng chiều cao tối thiểu (không phải chiều rộng tối thiểu) và đảm bảo chiều cao cho trước nhỏ hơn chiều cao tối thiểu trong truy vấn phương tiện. Ngoài ra, anh ta chỉ đưa ra một ví dụ cho ý tưởng của mình vì truy vấn phương tiện có thể thay đổi rất nhiều tùy thuộc vào những gì OP muốn đạt được.

    – Hoàng Gia Bạch 19:47:05 18/08/2015
4

Hoặc đơn giản hơn, bạn có thể đặt giữa các thẻ của mình trước, sau đó đến lớp css.

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>
|
4

Tôi biết đây là một chủ đề cũ nhưng điều này có thể giúp đỡ người khác.

Tôi đã có thể làm cho cuộn cơ thể bằng cách cố định vị trí phần tử hộp thoại modal. Và vì tôi sẽ không bao giờ biết được chiều cao chính xác của cửa sổ trình duyệt, tôi đã lấy thông tin mà tôi chắc chắn, chiều cao của tiêu đề và chân trang. Sau đó tôi đã có thể làm cho lề trên và dưới của phần tử mô đun khớp với các độ cao đó. Điều này sau đó tạo ra kết quả mà tôi đang tìm kiếm. Tôi đã cùng nhau ném một chiếc dĩa để thể hiện công việc của mình.

Ngoài ra, nếu bạn muốn một hộp thoại toàn màn hình, chỉ cần bỏ bình luận chiều rộng: auto; bên trong phần .modal-hộp.full-screen.

https://jsfiddle.net/lot224/znrktLej/

Và đây là css mà tôi đã sử dụng để sửa đổi hộp thoại bootstrap.

.modal-dialog.full-screen {
    position:fixed;
    //width:auto;  // uncomment to make the width based on the left/right attributes.
    margin:auto;                        
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.modal-dialog.full-screen .modal-content {
      position:absolute;
      left:10px;
      right:10px;
      top:10px;
      bottom:10px;
}

.modal-dialog.full-screen .modal-content .modal-header {
        height:55px;  // adjust as needed.
}

.modal-dialog.full-screen .modal-content .modal-body {
        overflow-y: auto;
          position: absolute;
          top: 0;
          bottom: 0;
        left:0;
        right:0;
          margin-top: 55px; // .modal-header height
          margin-bottom: 80px;  // .modal-footer height
}

.modal-dialog.full-screen .modal-content .modal-footer {
        height:80px;  // adjust as needed.
        position:absolute;
        bottom:0;
        left:0;
        right:0;
}
|
0

Điều làm việc cho tôi là thiết lập chiều cao tới 100% khi có tràn tự động với hy vọng điều này sẽ giúp ích

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>
|
0
#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

Sử dụng max-heightvới vhđơn vị trên modal-bodyhoặc một div trình bao bọc bên trong modal-body. Điều này sẽ tự động thay đổi kích thước chiều cao modal-bodyhoặc gói div (trong ví dụ này) khi người dùng thay đổi kích thước cửa sổ.

vh là đơn vị độ dài chiếm 1% kích thước khung nhìn cho chiều cao khung nhìn.

Biểu đồ tương thích trình duyệt cho vhđơn vị.

Ví dụ: https://jsfiddle.net/q3xwr53f/

|
0

Một giải pháp js đơn giản để đặt chiều cao phương thức tỷ lệ thuận với chiều cao của cơ thể:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

chiều cao cơ thể phải là 100%:

html, body {
    height: 100%;
    min-height: 100%;
}

Tôi đặt chiều cao cơ thể modal là 80% cơ thể, điều này tất nhiên có thể được tùy chỉnh.

Hy vọng nó giúp.

|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.