Question

我有一个网页布局。由三部分组成。布局非常简单，工作正常。小标题的问题是标题扩展并覆盖其下方的容器。我的问题是，如何使标头容器扩展，同时不覆盖它下面的容器？请排除固定高度。例如（高度：150px;）。高度必须设置为自动或任何使其响应的模式。

这是HTML代码：

@RestController
@Validated
public class TestController {

    @Autowired
    private TestHystrixController delegate;

    @RequestMapping(value = "/notok", method = RequestMethod.GET)
    ResponseEntity<String> methodNotOk(HttpServletRequest request,
         @Min(10) @RequestParam(name = "age") final int age) {
        return delegate.methodNotOk(request, age);
    }
}

@Controller
class TestHystrixController {

    @HystrixCommand(fallbackMethod = "fallback")
    ResponseEntity<String> methodNotOk(HttpServletRequest request,
         final int age) {
        return ResponseEntity.ok("Age is " + age);
    }
}

css代码：

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="repeat.css">
    </head>
    <body>
    <div class="header-container">
    <div> 
        <ul class="left">
            <li>home</li>
            <li>menu</li>
            <li>links</li>
            <li>contacts</li>
        </ul>
        <ul class="right">
            <li>home</li>
            <li>menu</li>
            <li>links</li>
            <li>contacts</li>
        </ul>
    </div>  
    </div>

    <div class="main-container">

    <div class="left-column">
        <div class="wrap">

        </div>  
    </div>
    <div class="main-column">
        <div>
            <p> this part should not be covered when the header 
            container change its height </p>
            <p> this part should not be covered when the header 
            container change its height </p>
            <p> this part should not be covered when the header 
            container change its height </p>
            <p> this part should not be covered when the header 
            container change its height </p>
            <p> this part should not be covered when the header 
            container change its height </p>
            <p> this part should not be covered when the header 
            container change its height </p>

        </div>
    </div>

    </div>
    </body>
    </html>

Answer 1

我使用jQuery获得了解决方案。该解决方案由Marc Audet发布。您可以在此链接后找到解决方案： CSS, image with height:auto, covers div beneath it upon screen resize (phone held horizontally)

如果任何人有另一个只使用css的解决方案，请高度赞赏。

如何防止标题高度覆盖其下方的容器，同时使其自动化

1 个答案: