Question

我有一个固定的div容器（文章），其中包含标题（m-title），描述（m-description）和用于实际文章内容的另一个div（m-body）。固定的div容器（文章）根据文章而改变大小，但最大高度为视口高度的80％。

现在，我已经尝试了一百万种不同的方法，但是我似乎无法让m-body div保持其父级内，并为内容创建一个正常工作的滚动条。我本来假设将m-body的高度设置为100％会迫使它占用其父对象内部的其余空间，但是它会一直持续下去（请参阅IMAGE）。理想情况下，最终产品的外观应类似于THIS。

我已尝试制作此问题的摘要示例-一些值可能与原始值不同。请记住，整个文章/卡片的大小应该灵活，标题和说明的大小可能会有所不同，从而使m-body的大小每次都不相同。

    article {
      height: auto;
      max-height: 512px;
      width: 512px;
      background-color: #F7F7F7;
      padding: 32px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
      z-index: 3000;
    }

    article .m-title {
      color: #1b1b1b;
      text-transform: uppercase;
      font-family: zeitung-micro, sans-serif;
      font-size: 3rem;
      font-weight: 300;
      font-style: normal;
    }

    article .m-description {
      color: rgba(27, 27, 27, 0.5);
      text-transform: normal;
      font-family: zeitung-micro, sans-serif;
      font-size: 1.6rem;
      font-weight: 500;
      font-style: normal;
      margin-bottom: 32px;
    }

    article .m-body {
      height: 100%;
      color: #1b1b1b;
      text-transform: normal;
      font-family: zeitung-micro, sans-serif;
      font-size: 1rem;
      font-weight: 300;
      font-style: normal;
      overflow-y: scroll;
    }

    <article id="article-3" class="hideme">
      <div onclick="contractFunction3(event)" class="close"></div>
      <h4 class="m-title">Title</h4>
      <p class="m-description">Description Description Description Description Description Description </p>
      <div class="m-body">
        <p>asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf sdf asasdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf</p>
      </div>
    </article>

在整个页面中打开代码片段以查看问题。

我在做什么错？我将不胜感激。

Answer 1

将此属性添加到文章

    protocol NavigationDelegate {

        associatedtype T

        func setUpInstance(navControllerToSetUp: controllerType,toName: String?, startLocation: String?, endLocation: String?, storyboardName: String) -> T

    }

enum controllerType {
    case  TurnModalViewController
    case  DirectionsModalViewController
}

extension NavViewController: NavigationDelegate {

typealias T = TurnModalViewController

    func setUpInstance(navControllerToSetUp: partialControllerType, toName: String?, startLocation: String?, endLocation: String?, storyboardName: String) -> TurnByTurnModalViewController {

        switch navControllerToSetUp {

        case .TurnModalViewController:
             let turnVC = TurnModalViewController.getInstance()
                    turnVC.modalPresentationStyle = .overCurrentContext
                    turnVC.delegate = self
                    turnVC.mapViewController = self
                    turnVC.turnByTurnModalDelegate = self
                    turnVC.toName = toName

                    return turnVC

//Can't access this controller unless specifically declared as the typealias T value
        case .DirectionsModalViewController:
             let getDirectionsVC = GetDirectionsModalViewController.getInstance()
                    getDirectionsVC.delegate = self
                    getDirectionsVC.getDirectionsDelegate = self
                    getDirectionsVC.modalPresentationStyle = .overCurrentContext
                    getDirectionsVC.startLocation = startLocation
                    getDirectionsVC.endLocation = endLocation
                    return getDirectionsVC
        }

    }

}

并将其从m-body中删除

overflow-y: scroll;

overflow-y: scroll;

article {
  height: auto;
  max-height: 512px;
  width: 512px;
  background-color: #F7F7F7;
  padding: 32px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  z-index: 3000;
  overflow-y: scroll;
}

article .m-title {
  color: #1b1b1b;
  text-transform: uppercase;
  font-family: zeitung-micro, sans-serif;
  font-size: 3rem;
  font-weight: 300;
  font-style: normal;
}

article .m-description {
  color: rgba(27, 27, 27, 0.5);
  text-transform: normal;
  font-family: zeitung-micro, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  font-style: normal;
  margin-bottom: 32px;
}

article .m-body {
  height: 100%;
  color: #1b1b1b;
  text-transform: normal;
  font-family: zeitung-micro, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  font-style: normal;
}

Answer 2

使用显示：flex将解决您的问题。

article {
    display: flex;
    flex-direction: column;
}

Answer 3

这很简单。您给了m.body高度100％。您必须给它px。

  article {
      height: auto;
      max-height: 512px;
      width: 512px;
      background-color: #F7F7F7;
      padding: 32px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
      z-index: 3000;
    }

    article .m-title {
      color: #1b1b1b;
      text-transform: uppercase;
      font-family: zeitung-micro, sans-serif;
      font-size: 3rem;
      font-weight: 300;
      font-style: normal;
    }

    article .m-description {
      color: rgba(27, 27, 27, 0.5);
      text-transform: normal;
      font-family: zeitung-micro, sans-serif;
      font-size: 1.6rem;
      font-weight: 500;
      font-style: normal;
      margin-bottom: 32px;
    }

    article .m-body {
      height: 200px;
      color: #1b1b1b;
      text-transform: normal;
      font-family: zeitung-micro, sans-serif;
      font-size: 1rem;
      font-weight: 300;
      font-style: normal;
      overflow-y: scroll;
    }

 <article id="article-3" class="hideme">
      <div onclick="contractFunction3(event)" class="close"></div>
      <h4 class="m-title">Title</h4>
      <p class="m-description">Description Description Description Description Description Description </p>
      <div class="m-body">
        <p>asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf sdf asasdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf</p>
      </div>
    </article>

将子元素保留在其父元素内（HTML和CSS）

3 个答案: