Question

在网格父级的子级上增加高度100％会使父级溢出。

我尝试了溢出：自动；在父级上，但是只是隐藏了按钮。

在这里查看我的示例：https://codepen.io/JordanDDisch/pen/GRKyWWG?editors=1100

#include <opencv2/opencv.hpp>
#include <opencv2/tracking.hpp>
#include <opencv2/core/ocl.hpp>
#include <opencv2/imgcodecs.hpp>
#include <opencv2/highgui/highgui.hpp>

using namespace cv;
using namespace std;

// Convert to string
#define SSTR( x ) static_cast< std::ostringstream & >(( std::ostringstream() << std::dec << x )).str()

int main(int argc, char **argv)
{
    // List of tracker types in OpenCV 3.4.1
    string trackerTypes[8] = {"BOOSTING", "MIL", "KCF", "TLD","MEDIANFLOW", "GOTURN", "MOSSE", "CSRT"};
    // vector <string> trackerTypes(types, std::end(types));

    // Create a tracker
    string trackerType = trackerTypes[2];

    Ptr<Tracker> tracker;

    #if (CV_MINOR_VERSION < 3)
    {
     // tracker = Tracker::create(trackerType);
    }
    #else
    {
        if (trackerType == "BOOSTING")
            tracker = TrackerBoosting::create();
        if (trackerType == "MIL")
            tracker = TrackerMIL::create();
        if (trackerType == "KCF")
            tracker = TrackerKCF::create();
        if (trackerType == "TLD")
            tracker = TrackerTLD::create();
        if (trackerType == "MEDIANFLOW")
            tracker = TrackerMedianFlow::create();
        if (trackerType == "GOTURN")
            tracker = TrackerGOTURN::create();
        if (trackerType == "MOSSE")
            tracker = TrackerMOSSE::create();
        if (trackerType == "CSRT")
            tracker = TrackerCSRT::create();
    }
    #endif
    // Read video
    VideoCapture video("videos/test.mp4");

    // Exit if video is not opened
    if(!video.isOpened())
    {
        cout << "Could not read video file" << endl; 
        return 1; 
    } 

    // Read first frame 
    Mat frame; 
    bool ok = video.read(frame); 

    // Define initial bounding box 
    Rect2d bbox(287, 23, 86, 320); 

    // Uncomment the line below to select a different bounding box 
    //bbox = selectROI(frame, false); 
    // Display bounding box. 
    rectangle(frame, bbox, Scalar( 255, 0, 0 ), 2, 1 ); 

    imshow("Tracking", frame); 
    tracker->init(frame, bbox);

    while(video.read(frame))
    {     
        // Start timer
        double timer = (double)getTickCount();

        // Update the tracking result
        bool ok = tracker->update(frame, bbox);

        // Calculate Frames per second (FPS)
        float fps = getTickFrequency() / ((double)getTickCount() - timer);

        if (ok)
        {
            // Tracking success : Draw the tracked object
            rectangle(frame, bbox, Scalar( 255, 0, 0 ), 2, 1 );
        }
        else
        {
            // Tracking failure detected.
            putText(frame, "Tracking failure detected", Point(100,80), FONT_HERSHEY_SIMPLEX, 0.75, Scalar(0,0,255),2);
        }

        // Display tracker type on frame
        putText(frame, trackerType + " Tracker", Point(100,20), FONT_HERSHEY_SIMPLEX, 0.75, Scalar(50,170,50),2);

        // Display FPS on frame
        putText(frame, "FPS : " + SSTR(int(fps)), Point(100,50), FONT_HERSHEY_SIMPLEX, 0.75, Scalar(50,170,50), 2);

        // Display frame.
        imshow("Tracking", frame);

        // Exit if ESC pressed.
        int k = waitKey(1);
        if(k == 27)
        {
            break;
        }

    }
}

我希望按钮不会溢出父元素。

Answer 1

请勿使用height: 100%。 100％与父级无关，因为您尚未在父级上定义高度。因此，问问自己：“ 100％是什么？” 。如果没有具体的指导（即父级的显式高度），浏览器的行为将不可靠并且可能会有所不同。

请避免高度百分比的额外复杂化，并始终使用flex属性。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

/* enables flex properties on the child */
.grid__item {
  display: flex;
  flex-direction: column;
}

.grid__inner-content {
  flex: 1; /* consumes all free space (taking full height) */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height: 100%; */
}

<div class="grid">
  <div class="grid__item">
    Stuff 1
    <div class="grid__inner-content">
      <ul class="page-marketing__list">
        <li>Website template design, 1 of 7 templates without a blog</li>
        <li>Hosting 12 months</li>
        <li>12 pages w/form and video</li>
        <li>One monthly email to your list</li>
        <li>1 post a week to Facebook/Instagram pages</li>
      </ul>
      <button>asdf</button>
    </div>
  </div>
  <div class="grid__item">
    Stuff 2

    <div class="grid__inner-content">
      <ul class="page-marketing__list">
        <li>Website template design, 1 of 7 templates without a blog</li>
        <li>Hosting 12 months</li>
        <li>12 pages w/form and video</li>
        <li>One monthly email to your list</li>
        <li>1 post a week to Facebook/Instagram pages</li>
        <li>One content update per month to website and security updates</li>
        <li>$150 a month in Google ad spending</li>
        <li>Get $100 in free advertising when you enroll</li>
        <li>1 monthly written blog for your website</li>
        <li>Ongoing SEO optimizations</li>
      </ul>
      <button>asdf</button>
    </div>
  </div>
</div>

<div style="background: green; padding: 2rem;">Stuff</div>

高度为100％的CSS网格子级溢出父级

1 个答案: