Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

CSS 高度 : 100% not working in html or body

In lại Tác giả: Walker 123 更新时间：2023-11-28 08:41:10 27 4
mua khóa gpt4 Nike

我正在尝试让我页面中的一些内容填满所有剩余的屏幕尺寸。我的页面有一个标题，内容是两个 div，都需要可滚动。我尝试了一些解决方案，我想出的最好的解决方案是使用 Flexbox并使用 CSS calc 设置高度。

但是 flexbox 的高度仍然只是内容的高度。大多数其他答案说将 thân hình Và html 标签高度设置为 100%。这也不起作用，我检查页面高度没有被继承。所以我怀疑这可能是问题所在，但我不知道答案是什么。

我也在使用 bootstrap 并使用 box-sizing 修复我在 bootstrap 中遇到的一些问题，这也可能是个问题。

我的 flexbox CSS:

html,
thân hình {
  chiều cao: 100%;
  /* setting height: 100vh doesn't work either
  chiều cao: 100vh;
  */
  margin: 0
}

thân hình {
    background: none repeat scroll 0 0;
    padding-top: 105px;
}

/* my header is 102px high and using calc to set the remaining height */
.flex-box {
    hiển thị: linh hoạt;
    height: -moz-calc(100% - 102px);
    height: -webkit-calc(100% - 102px);
    height: calc(100% - 102px);
}

.left {
    uốn cong: 1;
    order: 1;
    tràn: tự động;
    nền: đỏ;
}

.right {
    uốn cong: 1;
    order: 2;
    tràn: tự động;
    nền: xanh;
}

/* Fix for bootstrap box issues in slickgrid */
*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
.container .row *,
.container .row *:before,
.container .row *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          kích thước hộp: hộp viền;
}

编辑:添加 HTML:


    

        

            

                    

  1.                     ui-tree-node
                        data-ng-include="'angularTree.html'">


编辑:这是一个包含我正在使用的所有 css 的 jsfiddle，以及更完整的 html。

https://jsfiddle.net/w48567c6/

如何让 flexbox 使用整个剩余屏幕高度？

câu trả lời hay nhất

与其乱用 height: calc(100% - something)，我建议在任何地方都使用 flexbox!

html, body, .main-container, .main-container > div, .flex-box {
  display: flex; /* Flexbox everywhere! */
  flex: 1; /* Fill available space */
}
html { height: 100% } /* Fill the window */
body { margin: 0 } /* Kill annoying margins */
.left, .right {
  flex: 1; /* Fill available space */
  overflow: auto; /* In case content is too tall */
}

@import '../../../bootstrap/3.2.0/css/bootstrap.min.css';
html, body, .main-container, .main-container > div, .flex-box {
  hiển thị: linh hoạt;
  uốn cong: 1;
}
html { height: 100% }
body { margin: 0 }
.tiêu đề {
  background: lime;
  chiều cao: 50px;
}
.left, .right {
  uốn cong: 1;
  background: aqua;
  tràn: tự động;
}
.right {
  background: yellow;
}

/* Fix for bootstrap box issues in slickgrid */
*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.container .row *,
.container .row *:before,
.container .row *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  kích thước hộp: hộp viền;
}


/* adding all the other css I have just in case */
thân hình {
  background: none repeat scroll 0 0;
  padding-top: 105px;
}

/* nav-pills custom styling */
.nav > li > a {
  padding: 5px 15px;
}

.nav > li > .separator {
  padding: 5px 15px;
  color: #428bca;
  hiển thị: khối;
  vị trí: tương đối;
}

/* Fix for cursor point in angular bootstrap */
.nav, .pagination, .carousel, .panel-title a {
  con trỏ: con trỏ;
}

.nav {
  margin-top: 10px;
}

.no-top-margin {
  margin-top: 0px !important;
}

.action-bar {
  trên cùng: 50px;
  chỉ số z: 999;
}

#main-container {
  chiều rộng: 100%;
  hiển thị: khối nội tuyến;
}

input.editor-text {
  background: none repeat scroll 0 0 transparent;
  border: 0 none;
  chiều cao: 100%;
  lề: 0;
  outline: 0 none;
  phần đệm: 0;
  chiều rộng: 100%;
}

.hide {
  display: none !important;
}

.col-sm-7 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  lề: 0 tự động;
}

.form-signin #userName {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin #userPassword {
  lề dưới: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-signin .form-control {
  vị trí: tương đối;
  chiều cao: tự động;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  kích thước hộp: hộp viền;
  phần đệm: 10px;
  cỡ chữ: 16px;
}

div.personal-tools {
  margin-top: 10px;
}

/* centering nav-bar pagination */
.nav-center {
  hiển thị: bảng;
  lề: 0 tự động;
}

/* styling for the tree in the modal */
span.order-tree-node {
  độ dày phông chữ: đậm;
  background-color: Transparent;
  background-repeat:no-repeat;
  đường viền: không có;
  outline:none;
  con trỏ:con trỏ;
}

div.order-tree-content{
  hiển thị: khối nội tuyến;
  con trỏ: con trỏ;
}

button.custom-checkbox{
  background-color: Transparent;
  background-repeat:no-repeat;
  đường viền: không có;
  outline:none;
}

.align-right {
  phao: đúng;
}

i.checkbox-icon {
  màu nền: trắng;
}

li.order-filters {
  width: 10%;
  nổi:đúng;
}

/* overwriting bootstrap in table */
.currency {
  text-align: right;
}

.table {
  con trỏ: con trỏ;
}

  
  

    
    

      

        

              
  1. list item

    2.           
  2. list item

    3.           
  3. list item

    4.           
  4. list item

    5.           
  5. list item

    6.           
  6. list item

    7.           
  7. list item

    8.           
  8. list item

    9.           
  9. list item

    10.           
  10. list item

    11.         

      

      

        Necessitatibus omnis minus, ea, odit saepe recusandae delectus dolore, libero magnam sunt maxime laborum. Est praesentium aperiam officiis assumenda id corporis eos eveniet debitis, eius deserunt facilis, fuga! Sint, similique!

关于CSS 高度 : 100% not working in html or body，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30822227/

27 4 0
Đề xuất bài viết: javascript - d3.js可视化json文件麻烦
Đề xuất bài viết: css - chrome 中的边框问题
Đề xuất bài viết: Trang A đăng một giá trị lên Trang B, Trang B sử dụng cURL để gửi một bài đăng khác đến Trang C và trả về phản hồi cho Trang A
Đề xuất bài viết: javascript - JSON 数据到表单字段
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress