这是我正在研究的the page，请看一下。我必须调整它的高度，以便用户不必向下滚动。
这是SVG代码是here，太长了不适合页面的SO问题
<?php
/*
Template Name: Locations
*/
get_header();
$regions = get_field('regions');
$testimonials = get_field('locations_testimonials');
$time_of_each_slide = get_field('time_of_each_slide');
?>
<section id="locations" class="clearfix wrapper">
<div class="row" style="background-color:white;">
<div class="col-xs-11 col-xs-push-1">
<h2>Places where we work</h2>
</div>
</div>
<div class="col-xs-12 col-md-9 padding-0" id="location-map-wrap">
<span id="tooltip"></span>
<?php echo get_field('region_map_svg'); ?>
</div>
<div class="col-xs-12 col-md-3" id="location-side-bar">
<div id="location-detail" data-timer="<?php echo $time_of_each_slide; ?>">
<h3>What our beneficiaries say about us...</h3>
<div class="inner clearfix">
<?php foreach($testimonials as $testimonial): ?>
<div class="testimonial">
<div class="text"><?php echo $testimonial['testimonial']; ?></div>
<div class="author"><?php echo $testimonial['author']; ?></div>
</div>
<?php endforeach; ?>
</div>
<a href="/projects" class="cta-btn">Learn more about our projects</a>
</div>
</div>
</section>
<?php get_footer(); ?>
我不知道代码的其余部分在哪里，它是一个WordPress站点，所以获取完整代码很棘手，我不是创建该站点的人，但同样，我想要的只是调整SVG的大小，以便它适合上面的页面而不滚动，我已经包含了代码。
我尝试过的：
SVG宽度和高度，这搞砸了网站#map宽度和高度，没有做任何事情虽然不是问题本身的一部分，但您网站的实际呈现HTML看起来像这样：
<style>…</style> <!DOCTYPE html> <html lang="en-GB" prefix="og: http://ogp.me/ns#"> <head> …
根据HTML 5 specification，doctype必须在文档的开头。否则，您的页面将使用可能不符合HTML5标准的各种传统渲染方法进行解释。这很可能就是为什么你没有试图按照你的预期正确运行SVG的原因。
话虽这么说，为了定位图像本身，我建议使用vh视口单元。使用relatively good browser support，您可以将其与calc()组合以调整相对于视口大小的任何元素。如果你知道，例如，你的标题是200px高，那么你可以使用以下内容使SVG紧贴在它下面：
svg {
height: calc(100vh - 200px);
}
这不仅适用于图像，也适用于任何元素，因此您可以将其应用于您的列，并在其中的内容上使用height: 100%以获得类似的效果。